<!-- eslint-disable vue/valid-v-slot -->
<template>
  <div class="main-container">
    <!-- <a-collapse class="top" :default-active-key="['1']" expand-icon-position="right">
      <a-collapse-item key="1">
        <template #header>
          <div class="box">
            <div class="line"></div>
            <div class="text">卡板列表数据</div>
          </div>
        </template>
        <template #extra>
          <div>收起</div>
        </template>
        <div class="flex">
          <div v-for="item in state" :key="item.id" class="dataBox">
            <img class="img" :src="item.img" alt="" />
            <div style="line-height: 35px">
              <div class="name">
                {{ item.name }}
                <a-tooltip :content="item.introduce">
                  <icon-exclamation-circle />
                  <template #content>
                    {{ item.introduce }}
                  </template>
                </a-tooltip>
              </div>
              <div class="number">{{ item.number }}张</div>
            </div>
          </div>
        </div>
      </a-collapse-item>
    </a-collapse> -->
    <TableBody>
      <template #header>
        <TableHeader ref="tableHeaderRef" :show-filter="false">
          <template #search-content>
            <a-form ref="serchForm" :model="form" :style="{ width: '100%' }">
              <a-row :gutter="24">
                <a-col :span="4">
                  <a-form-item field="addId" hide-label>
                    <a-input-group style="width: 100%">
                      <a-input
                        hide-button
                        v-model="form.addId"
                        allow-clear
                        placeholder="卡板开始ID"
                      />
                      <a-input
                        hide-button
                        v-model="form.endId"
                        allow-clear
                        placeholder="卡板结束ID"
                      />
                    </a-input-group>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="addCard" hide-label>
                    <a-input v-model="form.addCard" placeholder="请输入卡板开始卡号" allow-clear />
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="endCard" hide-label>
                    <a-input v-model="form.endCard" placeholder="请输入卡板结束卡号" allow-clear />
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="direct" hide-label>
                    <a-select v-model="form.direct" allow-clear placeholder="请选择卡板类型">
                      <a-option :value="1">直属卡板</a-option>
                      <a-option :value="0">非直属卡板</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="userIds" hide-label>
                    <a-select
                      allow-search
                      v-model="form.userIds"
                      placeholder="请选择客户"
                      multiple
                      :max-tag-count="1"
                      allow-clear
                      :options="userList"
                      :virtual-list-props="{ height: 200 }"
                  /></a-form-item>
                </a-col>

                <a-col :span="4">
                  <a-form-item field="states" hide-label>
                    <a-select
                      v-model="form.states"
                      placeholder="请选择卡板状态"
                      multiple
                      :max-tag-count="1"
                      allow-clear
                      allow-search
                    >
                      <a-option
                        v-for="item in useCommon.state"
                        :key="item.state"
                        :value="item.state"
                        >{{ item.name }}</a-option
                      >
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="exceptionType" hide-label>
                    <a-select v-model="form.exceptionType" placeholder="请选择异常状态" allow-clear>
                      <a-option
                        v-for="item in useCommon.error"
                        :key="item.state"
                        :value="item.state"
                        >{{ item.name }}</a-option
                      >
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="pay" hide-label>
                    <a-select v-model="form.pay" placeholder="请选择充值状态" allow-clear>
                      <a-option :value="0">未充值</a-option>
                      <a-option :value="1">已充值</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="systemRealName" hide-label>
                    <a-select
                      v-model="form.systemRealName"
                      placeholder="请选择系统实名状态"
                      allow-clear
                    >
                      <a-option value="-1">未实名</a-option>
                      <a-option value="0">已实名</a-option>
                      <a-option value="1">已失败</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="officialRealName" hide-label>
                    <a-select
                      v-model="form.officialRealName"
                      placeholder="请选择官方实名状态"
                      allow-clear
                    >
                      <a-option value="-1">未知</a-option>
                      <a-option value="0">已实名</a-option>
                      <a-option value="1">未实名</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>

                <a-col :span="4">
                  <a-form-item field="speedLimit" hide-label>
                    <a-select v-model="form.speedLimit" placeholder="请选择限速状态" allow-clear>
                      <a-option :value="0">未限速</a-option>
                      <a-option :value="1">已限速</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="cancellation" hide-label>
                    <a-select v-model="form.cancellation" placeholder="请选择注销状态" allow-clear>
                      <a-option :value="0">未注销</a-option>
                      <a-option :value="1">已注销</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="change" hide-label>
                    <a-select v-model="form.change" placeholder="请选择换卡状态" allow-clear>
                      <a-option :value="0">未换卡</a-option>
                      <a-option :value="1">已换卡</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="channelIds" hide-label>
                    <!-- <a-select
                      v-model="form.channelIds"
                      placeholder="请选择渠道"
                      multiple
                      :max-tag-count="1"
                      allow-clear
                      allow-search
                    >
                      <a-option v-for="item in channel" :key="item.id" :value="item.id">{{
                        item.name
                      }}</a-option>
                    </a-select> -->
                    <a-tree-select
                      v-model="form.channelIds"
                      :allow-search="true"
                      :allow-clear="true"
                      :tree-checkable="true"
                      :tree-check-strictly="false"
                      :data="channel"
                      :max-tag-count="1"
                      :filter-tree-node="useCommon.filterTreeNode"
                      placeholder="请选择渠道"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="seriesIds" hide-label>
                    <a-select
                      multiple
                      :max-tag-count="1"
                      allow-clear
                      allow-search
                      v-model="form.seriesIds"
                      placeholder="请选择系列"
                    >
                      <a-option v-for="item in series" :key="item.id" :value="item.id">{{
                        item.name
                      }}</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="operator" hide-label>
                    <a-select v-model="form.operator" placeholder="请选择运营商" allow-clear>
                      <a-option :value="0">中国移动</a-option>
                      <a-option :value="1">中国联通</a-option>
                      <a-option :value="2">中国电信</a-option>
                      <a-option :value="3">中国广电</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <!-- <a-col :span="4">
                  <a-form-item field="addFlowRefreshTime" hide-label>
                    <a-date-picker
                      style="width: 100%"
                      v-model="form.addFlowRefreshTime"
                      show-time
                      placeholder="请选择开始刷新时间"
                      :time-picker-props="{ defaultValue: '12:00:00' }"
                      format="YYYY-MM-DD HH:mm:ss"
                      allow-clear
                      :shortcuts="[
                        {
                          label: '今日',
                          value: () => (
                            (form.addFlowRefreshTime = $dayjs('00:00:00', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endFlowRefreshTime = $dayjs('23:59:59', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            ))
                          ),
                        },
                        {
                          label: '昨日',
                          value: () => (
                            (form.addFlowRefreshTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endFlowRefreshTime = $dayjs('23:59:59', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '七日',
                          value: () => (
                            (form.addFlowRefreshTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(6, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endFlowRefreshTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '本月',
                          value: () => (
                            (form.addFlowRefreshTime = $dayjs('01 00:00:00', 'DD HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endFlowRefreshTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '上月',
                          value: () => (
                            (form.addFlowRefreshTime = $dayjs(`01 00:00:00`, 'DD HH:mm:ss')
                              .subtract(1, 'month')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endFlowRefreshTime = $dayjs()
                              .subtract(1, 'month')
                              .endOf('month')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                      ]"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="endFlowRefreshTime" hide-label>
                    <a-date-picker
                      style="width: 100%"
                      v-model="form.endFlowRefreshTime"
                      show-time
                      placeholder="请选择结束刷新时间"
                      :time-picker-props="{ defaultValue: '12:00:00' }"
                      format="YYYY-MM-DD HH:mm:ss"
                      allow-clear
                      :shortcuts="[
                        {
                          label: '今日',
                          value: () => (
                            (form.addCreateTime = $dayjs('00:00:00', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endCreateTime = $dayjs('23:59:59', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            ))
                          ),
                        },
                        {
                          label: '昨日',
                          value: () => (
                            (form.addCreateTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endCreateTime = $dayjs('23:59:59', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '七日',
                          value: () => (
                            (form.addCreateTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(6, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endCreateTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '本月',
                          value: () => (
                            (form.addCreateTime = $dayjs('01 00:00:00', 'DD HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endCreateTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '上月',
                          value: () => (
                            (form.addCreateTime = $dayjs(`01 00:00:00`, 'DD HH:mm:ss')
                              .subtract(1, 'month')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endCreateTime = $dayjs()
                              .subtract(1, 'month')
                              .endOf('month')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                      ]"
                    />
                  </a-form-item>
                </a-col> -->
                <a-col :span="4">
                  <a-form-item field="addCreateTime" hide-label>
                    <a-date-picker
                      style="width: 100%"
                      v-model="form.addCreateTime"
                      show-time
                      placeholder="请选择开始入库时间"
                      :time-picker-props="{ defaultValue: '12:00:00' }"
                      format="YYYY-MM-DD HH:mm:ss"
                      allow-clear
                      :shortcuts="[
                        {
                          label: '今日',
                          value: () => (
                            (form.addCreateTime = $dayjs('00:00:00', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endCreateTime = $dayjs('23:59:59', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            ))
                          ),
                        },
                        {
                          label: '昨日',
                          value: () => (
                            (form.addCreateTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endCreateTime = $dayjs('23:59:59', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '七日',
                          value: () => (
                            (form.addCreateTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(6, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endCreateTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '本月',
                          value: () => (
                            (form.addCreateTime = $dayjs('01 00:00:00', 'DD HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endCreateTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '上月',
                          value: () => (
                            (form.addCreateTime = $dayjs(`01 00:00:00`, 'DD HH:mm:ss')
                              .subtract(1, 'month')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endCreateTime = $dayjs()
                              .subtract(1, 'month')
                              .endOf('month')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                      ]"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="endCreateTime" hide-label>
                    <a-date-picker
                      style="width: 100%"
                      v-model="form.endCreateTime"
                      show-time
                      placeholder="请选择结束入库时间"
                      :time-picker-props="{ defaultValue: '12:00:00' }"
                      format="YYYY-MM-DD HH:mm:ss"
                      allow-clear
                      :shortcuts="[
                        {
                          label: '今日',
                          value: () => (
                            (form.addCreateTime = $dayjs('00:00:00', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endCreateTime = $dayjs('23:59:59', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            ))
                          ),
                        },
                        {
                          label: '昨日',
                          value: () => (
                            (form.addCreateTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endCreateTime = $dayjs('23:59:59', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '七日',
                          value: () => (
                            (form.addCreateTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(6, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endCreateTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '本月',
                          value: () => (
                            (form.addCreateTime = $dayjs('01 00:00:00', 'DD HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endCreateTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '上月',
                          value: () => (
                            (form.addCreateTime = $dayjs(`01 00:00:00`, 'DD HH:mm:ss')
                              .subtract(1, 'month')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endCreateTime = $dayjs()
                              .subtract(1, 'month')
                              .endOf('month')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                      ]"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="addBalance" hide-label>
                    <a-input-group style="width: 100%">
                      <a-input
                        hide-button
                        v-model="form.addBalance"
                        allow-clear
                        placeholder="开始余额"
                      />
                      <a-input
                        hide-button
                        v-model="form.endBalance"
                        allow-clear
                        placeholder="结束余额"
                      />
                    </a-input-group>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="addUsed" hide-label>
                    <a-input-group style="width: 100%">
                      <a-input
                        hide-button
                        v-model="form.addUsed"
                        allow-clear
                        placeholder="开始已用流量"
                      />
                      <a-input
                        hide-button
                        v-model="form.endUsed"
                        allow-clear
                        placeholder="结束已用流量"
                      />
                    </a-input-group>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="addFree" hide-label>
                    <a-input-group style="width: 100%">
                      <a-input
                        hide-button
                        v-model="form.addFree"
                        allow-clear
                        placeholder="开始剩余流量"
                      />
                      <a-input
                        hide-button
                        v-model="form.endFree"
                        allow-clear
                        placeholder="结束剩余流量"
                      />
                    </a-input-group>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="addUpstreamFlow" hide-label>
                    <a-input-group style="width: 100%">
                      <a-input
                        hide-button
                        v-model="form.addUpstreamFlow"
                        placeholder="开始上游流量"
                        allow-clear
                      />
                      <a-input
                        hide-button
                        v-model="form.endUpstreamFlow"
                        placeholder="结束上游流量"
                        allow-clear
                      />
                    </a-input-group>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="addPayNumber" hide-label>
                    <a-input-group style="width: 100%">
                      <a-input
                        hide-button
                        v-model="form.addPayNumber"
                        allow-clear
                        placeholder="开始充值次数"
                      />
                      <a-input
                        hide-button
                        v-model="form.endPayNumber"
                        allow-clear
                        placeholder="结束充值次数"
                      />
                    </a-input-group>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="addUpstreamFlow" hide-label>
                    <a-input-group style="width: 100%">
                      <a-select :style="{ width: '50%' }" v-model="types" placeholder="刷新类型">
                        <a-option value="flowRefreshTime">流量刷新</a-option>
                        <a-option value="stateRefreshTime">状态刷新</a-option>
                        <a-option value="realNameRefreshTime">实名刷新</a-option>
                      </a-select>
                      <a-input-number
                        :style="{ width: '50%' }"
                        v-model="typesNum"
                        :precision="0"
                        allow-clear
                        hide-button
                      >
                        <template #suffix>
                          <a-tooltip
                            content="输入0搜索：卡没有刷新过；输入负数搜索：代表超出X小时未刷新过；输入正数：代表X小时内刷新过。"
                            ><icon-question-circle style="cursor: pointer" />
                          </a-tooltip>
                        </template>
                      </a-input-number>
                    </a-input-group>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="cards" hide-label>
                    <a-input-group style="width: 100%">
                      <a-select
                        @change="cardsFns"
                        :style="{ width: '50%' }"
                        v-model="type"
                        placeholder="搜索类型"
                      >
                        <a-option value="ids">ID</a-option>
                        <a-option value="cards">卡号</a-option>
                      </a-select>
                      <a-input v-model="carda" placeholder="多条件搜索框" allow-clear>
                        <template #suffix>
                          <icon-plus @click="cardsVisible = true" style="cursor: pointer" />
                        </template>
                      </a-input>
                    </a-input-group>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="btns" hide-label>
                    <a-space :size="15">
                      <a-button
                        type="primary"
                        v-permission="cardList"
                        html-type="submit"
                        @click="doRefresh(1)"
                        ><template #icon>
                          <icon-search />
                        </template>
                        <!-- Use the default slot to avoid extra spaces -->
                        <template #default>搜索</template></a-button
                      >
                      <a-button v-permission="cardList" @click="resetSeach"
                        ><template #icon>
                          <icon-sync theme="outline" size="14" />
                        </template>
                        <!-- Use the default slot to avoid extra spaces -->
                        <template #default>重置</template></a-button
                      >
                    </a-space>
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>
          </template>
        </TableHeader>
      </template>
      <template #table-config>
        <a-space :size="15">
          <a-button
            type="outline"
            v-permission="exportCardList"
            :loading="loading"
            @click="exportDepartments"
          >
            <!-- Use the default slot to avoid extra spaces -->
            <template #default>导出</template>
          </a-button>
          <a-button type="outline" @click="delimitation">
            <!-- Use the default slot to avoid extra spaces -->
            <template #default>卡板分销</template>
          </a-button>
          <a-button type="outline" @click="retrieveFn">
            <!-- Use the default slot to avoid extra spaces -->
            <template #default>卡板回收</template>
          </a-button>
          <a-button type="outline" @click="deleteVisible = true">
            <!-- Use the default slot to avoid extra spaces -->
            <template #default>卡板删除</template>
          </a-button>
          <a-dropdown-button trigger="hover">
            更多操作
            <template #icon>
              <icon-down />
            </template>
            <template #content>
              <a-doption @click="openPara">修改系列</a-doption>
              <a-doption @click="batchShowFn">批量操作</a-doption>
              <!-- <a-doption @click="openRemark">卡板备注</a-doption>
              <a-doption @click="openOneCard">一卡一码</a-doption> -->
            </template>
          </a-dropdown-button>
        </a-space>
        <a-space :size="15">
          <SortableTable
            class="ml-4"
            :namere="tableColumns.neme"
            :columns="tableColumns.nsma"
            :oldList="nameMSG"
            @update="onUpdateTable"
          />
          <TableConfig
            @update-border="onUpdateBorder"
            @update-striped="onUpdateStriped"
            @refresh="doRefresh"
          />
        </a-space>
      </template>
      <template #default>
        <a-table
          :loading="tableLoading"
          :bordered="{ wrapper: true, cell: tables.bordered }"
          :stripe="(tables.striped as boolean)"
          :data="table.dataList"
          :pagination="false"
          :row-key="rowKey"
          :row-class-name="rowClassNameFun"
          :scroll="scroll"
          :scrollbar="{ type: 'track', outerClass: '', outerStyle: '' }"
          @row-click="handleRowClick"
          @change="handleChange"
        >
          <template #columns>
            <a-table-column
              v-for="item of tableColumns.list"
              :key="item.key"
              align="left"
              :title="(item.title as string)"
              :width="item.width"
              :data-index="(item.key as string)"
              :fixed="item.fixed"
              :ellipsis="true"
              :tooltip="true"
              :sortable="item.sortable"
            >
              <template v-if="item.key === 'card'" #cell="{ record }">
                <div class="ba">
                  <img
                    class="imgsa"
                    v-if="record.series.operator == 0"
                    src="@/assets/yd.png"
                    alt=""
                  />
                  <img
                    class="imgsa"
                    v-if="record.series.operator == 1"
                    src="@/assets/lt.png"
                    alt=""
                  />
                  <img
                    class="imgsa"
                    v-if="record.series.operator == 2"
                    src="@/assets/dx.png"
                    alt=""
                  />
                  <img
                    class="imgsa"
                    v-if="record.series.operator == 3"
                    src="@/assets/gd.png"
                    alt=""
                  />
                  <span @click="useCommon.routerOne(record.card)">{{ record.card }}</span>
                  <icon-copy
                    class="aa"
                    size="18"
                    style="color: #3491fa; padding-left: 5px"
                    @click="useCommon.copy(record.card)"
                  />

                  <icon-search
                    class="aa"
                    size="18"
                    style="color: #3491fa; padding-left: 5px"
                    @click="detailFns(record)"
                  />
                </div>
              </template>
              <template v-if="item.key === 'total'" #cell="{ record }">
                <span v-if="record.free != undefined">
                  {{ Math.floor(((record.used + record.free) / 1024) * 100) / 100 }}G</span
                >
                <span v-else> 无限</span>
              </template>
              <template v-if="item.key === 'used'" #cell="{ record }">
                {{ Math.floor((record.used / 1024) * 100) / 100 }}G
              </template>
              <template v-if="item.key === 'free'" #cell="{ record }">
                <span v-if="record.free != undefined"
                  >{{ Math.floor((record.free / 1024) * 100) / 100 }}G</span
                >
                <span v-else> 无限</span>
              </template>
              <template v-if="item.key === 'upstream_flow'" #cell="{ record }">
                <div v-if="record.upstreamFlow != undefined">
                  {{ Math.floor((record.upstreamFlow / 1024) * 100) / 100 }}G</div
                >
                <div v-else> ---</div>
              </template>
              <template v-if="item.key === 'officialRealName'" #cell="{ record }">
                <a-tag color="blue" v-if="record.officialRealName == 0">已实名</a-tag>
                <a-tag v-else-if="record.officialRealName == 1">未实名</a-tag>
                <a-tag v-else>未知</a-tag>
              </template>
              <template v-if="item.key === 'online'" #cell="{ record }">
                <a-tag color="blue" v-if="record.online == 0">在线</a-tag>
                <a-tag v-else-if="record.online == 1">离线</a-tag>
                <a-tag v-else>未知</a-tag>
              </template>
              <template v-if="item.key === 'cardRealName'" #cell="{ record }">
                <a-tag color="blue" v-if="record.systemRealName === 0">已实名</a-tag>
                <a-tag color="red" v-else-if="record.systemRealName == 1">已失败</a-tag>
                <a-tag v-else>未实名</a-tag>
              </template>
              <template v-if="item.key === 'userId'" #cell="{ record }">
                <a-tag color="blue" v-if="record.userId">已分销</a-tag>
                <a-tag v-else>未分销</a-tag>
              </template>
              <template v-if="item.key === 'cancellationGroupId'" #cell="{ record }">
                <a-tag color="red" v-if="record.cancellationGroupId">已注销</a-tag>
                <a-tag v-else>未注销</a-tag>
              </template>
              <template v-if="item.key === 'firstPayTime'" #cell="{ record }">
                <a-tag color="blue" v-if="record.firstPayTime">已充值</a-tag>
                <a-tag v-else>未充值</a-tag>
              </template>
              <template v-if="item.key === 'speedLimitTagId'" #cell="{ record }">
                <a-tag color="red" v-if="record.speedLimitTagId">已限速</a-tag>
                <a-tag v-else>未限速</a-tag>
              </template>
              <template v-if="item.key === 'changeGroupId'" #cell="{ record }">
                <a-tag color="red" v-if="record.changeGroupId">已换卡</a-tag>
                <a-tag v-else>未换卡</a-tag>
              </template>
              <template v-if="item.key === 'exceptionType'" #cell="{ record }">
                <a-tag color="red" v-if="record.exceptionType">{{ record.exceptionName }}</a-tag>
                <a-tag color="blue" v-else>正常</a-tag>
              </template>
              <template v-if="item.key === 'remarks'" #cell="{ record }">
                <span v-if="record.remarks">{{ record.remarks }}</span>
                <span v-else>- - -</span>
              </template>
              <template v-else-if="item.key === 'series'" #cell="{ record }">
                {{ record.series.name }}
              </template>
              <template v-else-if="item.key === 'userName'" #cell="{ record }">
                <span v-if="record.user">{{ record.user.userName }}</span>
                <span v-else>管理员 </span>
              </template>
              <template v-else-if="item.key === 'stateName'" #cell="{ record }">
                <a-tag :color="record.stateName.color">{{ record.stateName.name }}</a-tag>
              </template>
              <template v-else-if="item.key === 'flowRefreshTime'" #cell="{ record }">
                <span v-if="record.flowRefreshTime">{{ record.flowRefreshTime }}</span>
                <span v-else>- - -</span>
              </template>
              <template v-else-if="item.key === 'stateRefreshTime'" #cell="{ record }">
                <span v-if="record.stateRefreshTime">{{ record.stateRefreshTime }}</span>
                <span v-else>- - -</span>
              </template>
              <template v-else-if="item.key === 'realNameRefreshTime'" #cell="{ record }">
                <span v-if="record.realNameRefreshTime">{{ record.realNameRefreshTime }}</span>
                <span v-else>- - -</span>
              </template>
              <template v-else-if="item.key === 'channel'" #cell="{ record }">
                {{ record.series.channel.name }}
              </template>

              <template v-else-if="item.key === 'balance'" #cell="{ record }">
                {{ '￥' + record.balance }}
              </template>
              <template v-else-if="item.key === 'actions'" #cell="{ record }">
                <a-space style="display: flex; flex-wrap: wrap" :size="2">
                  <a-button
                    style="margin-right: 5px; padding: 0px"
                    type="text"
                    size="small"
                    @click="detailFn(record, 1)"
                    >详情</a-button
                  >
                  <a-button
                    v-permission="refresh"
                    style="margin-right: 5px; padding: 0px"
                    type="text"
                    size="small"
                    @click="RefreshFn(record, '')"
                    >刷新</a-button
                  >
                  <a-button
                    v-permission="stop"
                    style="margin-right: 5px; padding: 0px"
                    type="text"
                    size="small"
                    @click="stopFn(record)"
                    >停机</a-button
                  >
                  <a-button
                    v-permission="start"
                    style="margin-right: 5px; padding: 0px"
                    type="text"
                    size="small"
                    @click="startFn(record)"
                    >复机</a-button
                  >
                  <a-button
                    v-permission="update"
                    style="margin-right: 5px; padding: 0px"
                    type="text"
                    size="small"
                    @click="correctId(record)"
                    >编辑</a-button
                  >
                  <a-button
                    v-permission="orderpay"
                    style="margin-right: 5px; padding: 0px"
                    type="text"
                    size="small"
                    @click="mealFn(record)"
                    >充值</a-button
                  >
                  <a-button
                    v-permission="passWord"
                    style="margin-right: 5px; padding: 0px"
                    type="text"
                    size="small"
                    @click="passWordFn(record.id)"
                    >密码</a-button
                  >
                  <a-dropdown :popup-max-height="false" trigger="hover">
                    <a-button
                      type="text"
                      style="margin-right: 5px; padding: 0px; font-size: 24px"
                      size="small"
                      >···</a-button
                    >
                    <template #content>
                      <!-- <a-doption @click="detailFn(record)">卡板详情</a-doption> -->
                      <!-- <a-doption @click="mealFn(record.card)">套餐充值</a-doption> -->
                      <a-doption v-permission="balance" @click="balanceFn(record, record.balance)"
                        >充值余额</a-doption
                      >
                      <a-doption v-permission="updateCancelLise" @click="cancelCFns(record.card)"
                        >卡板注销</a-doption
                      >
                      <a-doption @click="jianCeFn(record)">智能检测</a-doption>
                      <a-doption @click="openOneCodeEr(record)">一卡一码</a-doption>
                    </template>
                  </a-dropdown>
                </a-space>
              </template>
            </a-table-column>
          </template>
        </a-table>
        <div
          style="
            border: 1px solid rgba(229, 231, 235, var(--tw-border-opacity));
            border-top: 0;
            padding: 12px;
            text-align: left;
          "
          >统计：总流量:{{ Math.floor(((total.used + total.free) / 1024) * 100) / 100 }}G
          <span style="margin-left: 10px"
            >已用流量:{{ Math.floor((total.used / 1024) * 100) / 100 }}G</span
          >
          <span style="margin-left: 10px"
            >剩余流量: {{ Math.floor((total.free / 1024) * 100) / 100 }}G</span
          >
          <span style="margin-left: 10px"
            >上游已用: {{ Math.floor((total.upstream_flow / 1024) * 100) / 100 }}G</span
          >
          <span style="margin-left: 10px"
            >真实已用:{{ Math.floor((total.real_used / 1024) * 100) / 100 }}G</span
          >
          <span style="margin-left: 10px">充值次数:{{ total.pay_number }}次</span>
          <span style="margin-left: 10px">卡板余额:{{ total.balance }}元</span>
          <span style="margin-left: 10px">激活数量:{{ total.activation }}张</span>
          <span style="margin-left: 10px">在网数量:{{ total.line }}张</span>
          <span style="margin-left: 10px"
            >激活率:{{ Math.floor((total.activation / total.number) * 10000) / 100 }}%</span
          >
          <span style="margin-left: 10px"
            >流失率:
            <span v-if="total.activation > 0">
              {{ Math.floor(((total.activation - total.line) / total.activation) * 10000) / 100 }}%
            </span>
            <span v-else> 0% </span></span
          >
        </div>
      </template>
      <template #footer>
        <TableFooter :pagination="pagination" />
      </template>
    </TableBody>
    <!-- 矫正卡号 -->
    <a-modal
      v-model:visible="correctVisible"
      @before-close="correctCFn"
      title="矫正卡号"
      width="600px"
      :mask-closable="false"
      title-align="start"
    >
      <a-form ref="correctRef" :auto-label-width="true" :model="correctForm">
        <a-form-item
          field="apiCard"
          label="接口卡号"
          :rules="[{ required: true, message: '接口卡号不能为空' }]"
          :validate-trigger="['change', 'input']"
          asterisk-position="end"
        >
          <a-input
            v-model="correctForm.apiCard"
            :max-length="30"
            placeholder="请输入接口卡号"
            allow-clear
          />
        </a-form-item>
        <a-form-item
          field="iccid"
          label="完整卡号"
          :rules="[{ required: true, message: 'iccid不能为空' }]"
          :validate-trigger="['change', 'input']"
          asterisk-position="end"
        >
          <a-input
            v-model="correctForm.iccid"
            :max-length="30"
            placeholder="请输入iccid"
            allow-clear
          />
        </a-form-item>
        <a-form-item
          field="card"
          label="显示卡号"
          :rules="[{ required: true, message: '显示卡号不能为空' }]"
          :validate-trigger="['change', 'input']"
          asterisk-position="end"
        >
          <a-input
            v-model="correctForm.card"
            :max-length="30"
            placeholder="请输入显示卡号"
            allow-clear
          />
        </a-form-item>

        <a-form-item field="realNameCard" label="实名卡号">
          <a-input
            v-model="correctForm.realNameCard"
            :max-length="30"
            placeholder="请输入实名卡号"
            allow-clear
          />
        </a-form-item>
        <a-form-item field=" imei" label="imei">
          <a-input
            v-model="correctForm.imei"
            :max-length="30"
            placeholder="请输入 imei"
            allow-clear
          />
        </a-form-item>
        <a-form-item field="imsi" label="imsi">
          <a-input
            v-model="correctForm.imsi"
            :max-length="30"
            placeholder="请输入imsi"
            allow-clear
          />
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="correctCFn">取消</a-button>
          <a-button type="primary" :loading="loadings" @click="correctSub">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 卡板备注 -->
    <a-modal
      v-model:visible="remarkShow"
      @before-close="handleCancelRemark"
      title="卡板备注"
      width="660px"
      :mask-closable="false"
      title-align="start"
    >
      <a-form class="huakaClass" ref="remarkRef" :model="remarkForm" :auto-label-width="true">
        <a-form-item label="设置方式" :content-flex="false" :merge-props="false">
          <a-row :gutter="24">
            <a-col :span="2">
              <a-radio style="margin-top: 10px" v-model="remarkC" value="orderly" />
            </a-col>
            <a-col :span="10">
              <a-form-item
                hide-asterisk
                field="addCard"
                validate-trigger="input"
                :rules="[
                  { required: remarkC == 'orderly' ? true : false, message: '请输入开始卡号' },
                ]"
                no-style
                asterisk-position="end"
              >
                <a-input
                  v-model="remarkForm.addCard"
                  :disabled="remarkC == 'orderly' ? false : true"
                  placeholder="请输入开始卡号"
                  allow-clear
                />
              </a-form-item>
            </a-col>
            <a-col :span="2">
              <div style="height: 1px; background-color: #000; margin-top: 16px"></div>
            </a-col>
            <a-col :span="10">
              <a-form-item
                field="endCard"
                hide-asterisk
                validate-trigger="input"
                :rules="[
                  { required: remarkC == 'orderly' ? true : false, message: '请输入结束卡号' },
                ]"
                no-style
                asterisk-position="end"
              >
                <a-input
                  v-model="remarkForm.endCard"
                  :disabled="remarkC == 'orderly' ? false : true"
                  placeholder="请输入结束卡号"
                  allow-clear
                />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form-item>
        <a-form-item
          field="cardMultiline"
          :content-flex="false"
          hide-asterisk
          :merge-props="false"
          :rules="[{ required: remarkC == 'disOrder' ? true : false, message: '卡号不能为空' }]"
          :validate-trigger="['change', 'input']"
          asterisk-position="end"
        >
          <a-row :gutter="24">
            <a-col :span="2">
              <a-radio style="margin-top: 10px" v-model="remarkC" value="disOrder" />
            </a-col>
            <a-col :span="22">
              <a-textarea
                :auto-size="{
                  minRows: 10,
                }"
                v-model="remarkForm.cardMultiline"
                :disabled="remarkC == 'disOrder' ? false : true"
                placeholder="请输入卡号，一行一个"
                allow-clear
              />
            </a-col>
          </a-row>
        </a-form-item>
        <a-form-item
          field="remarks"
          label="卡板备注"
          hide-asterisk
          :content-flex="false"
          :merge-props="false"
          asterisk-position="end"
        >
          <a-row :gutter="24">
            <a-col :span="2" />

            <a-col :span="22">
              <a-input v-model="remarkForm.remarks" placeholder="请输入备注" allow-clear />
            </a-col>
          </a-row>
        </a-form-item>
        <a-form-item
          field="cover"
          label="备注类型"
          hide-asterisk
          :content-flex="false"
          :merge-props="false"
          :rules="[{ required: true, message: '备注类型不能为空' }]"
          :validate-trigger="['change', 'input']"
          asterisk-position="end"
        >
          <a-row :gutter="24">
            <a-col :span="2" />

            <a-col :span="22">
              <a-select v-model="remarkForm.cover" allow-clear placeholder="请选择备注类型">
                <a-option :value="true">覆盖备注</a-option>
                <a-option :value="false">不覆盖</a-option>
              </a-select>
            </a-col>
          </a-row>
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="handleCancelRemark">取消</a-button>
          <a-button type="primary" :loading="loadingRemark" @click="handleBeforeOkRemark"
            >确定</a-button
          >
        </a-space>
      </template>
    </a-modal>
    <!-- 删除操作 -->
    <a-modal
      v-model:visible="deleteVisible"
      @before-close="handleCancelDelete"
      title="删除操作"
      width="660px"
      :mask-closable="false"
      title-align="start"
    >
      <a-form class="huakaClass" ref="deleteForms" :model="deleteForm" :auto-label-width="true">
        <a-form-item label="删除卡号" :content-flex="false" :merge-props="false">
          <a-row :gutter="24">
            <a-col :span="2">
              <a-radio
                style="margin-top: 10px; margin-bottom: 20px"
                v-model="checked1"
                value="seach"
              />
            </a-col>
            <a-col :span="22">
              <div style="text-align: left; margin-top: 5px; margin-bottom: 20px"
                >当前搜索条件下
              </div>
            </a-col>
            <a-col :span="2">
              <a-radio style="margin-top: 10px" v-model="checked1" value="orderly" />
            </a-col>
            <a-col :span="10">
              <a-form-item
                hide-asterisk
                field="addCard"
                validate-trigger="input"
                :rules="[
                  { required: checked1 == 'orderly' ? true : false, message: '请输入开始卡号' },
                ]"
                no-style
                asterisk-position="end"
              >
                <a-input
                  v-model="deleteForm.addCard"
                  :disabled="checked1 == 'orderly' ? false : true"
                  placeholder="请输入开始卡号"
                  allow-clear
                />
              </a-form-item>
            </a-col>
            <a-col :span="2">
              <div style="height: 1px; background-color: #000; margin-top: 16px"></div>
            </a-col>
            <a-col :span="10">
              <a-form-item
                field="endCard"
                hide-asterisk
                validate-trigger="input"
                :rules="[
                  { required: checked1 == 'orderly' ? true : false, message: '请输入结束卡号' },
                ]"
                no-style
                asterisk-position="end"
              >
                <a-input
                  v-model="deleteForm.endCard"
                  :disabled="checked1 == 'orderly' ? false : true"
                  placeholder="请输入结束卡号"
                  allow-clear
                />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form-item>
        <a-form-item
          field="cardMultiline"
          :content-flex="false"
          hide-asterisk
          :merge-props="false"
          :rules="[{ required: checked1 == 'disOrder' ? true : false, message: '卡号不能为空' }]"
          :validate-trigger="['change', 'input']"
          asterisk-position="end"
        >
          <a-row :gutter="24">
            <a-col :span="2">
              <a-radio style="margin-top: 10px" v-model="checked1" value="disOrder" />
            </a-col>
            <a-col :span="22">
              <a-textarea
                :auto-size="{
                  minRows: 10,
                }"
                v-model="deleteForm.cardMultiline"
                :disabled="checked1 == 'disOrder' ? false : true"
                placeholder="请输入卡号，一行一个"
                allow-clear
              />
            </a-col>
          </a-row>
        </a-form-item>
        <a-form-item
          field="remarks"
          label="删除备注"
          hide-asterisk
          :content-flex="false"
          :merge-props="false"
          asterisk-position="end"
        >
          <a-row :gutter="24">
            <a-col :span="2" />

            <a-col :span="22">
              <a-input v-model="deleteForm.remarks" placeholder="请输入删除备注" allow-clear />
            </a-col>
          </a-row>
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="deleteVisible = false">取消</a-button>
          <a-button type="primary" :loading="loadings" @click="handleBeforeOkDeletes"
            >确定</a-button
          >
        </a-space>
      </template>
    </a-modal>
    <!-- 回收操作 -->
    <a-modal
      v-model:visible="retrieveVisible"
      @before-close="handleCancelRetrieve"
      title="回收操作"
      width="660px"
      :mask-closable="false"
      title-align="start"
    >
      <a-form class="huakaClass" ref="retrieveForms" :model="retrieveForm" :auto-label-width="true">
        <a-form-item label="回收卡号" :content-flex="false" :merge-props="false">
          <a-row :gutter="24">
            <a-col :span="2">
              <a-radio
                style="margin-top: 10px; margin-bottom: 20px"
                v-model="checked1"
                value="seach"
              />
            </a-col>
            <a-col :span="22">
              <div style="text-align: left; margin-top: 5px; margin-bottom: 20px"
                >当前搜索条件下
              </div>
            </a-col>
            <a-col :span="2">
              <a-radio style="margin-top: 10px" v-model="checked1" value="orderly" />
            </a-col>
            <a-col :span="10">
              <a-form-item
                hide-asterisk
                field="addCard"
                validate-trigger="input"
                :rules="[
                  { required: checked1 == 'orderly' ? true : false, message: '请输入开始卡号' },
                ]"
                no-style
                asterisk-position="end"
              >
                <a-input
                  v-model="retrieveForm.addCard"
                  :disabled="checked1 == 'orderly' ? false : true"
                  placeholder="请输入开始卡号"
                  allow-clear
                />
              </a-form-item>
            </a-col>
            <a-col :span="2">
              <div style="height: 1px; background-color: #000; margin-top: 16px"></div>
            </a-col>
            <a-col :span="10">
              <a-form-item
                field="endCard"
                hide-asterisk
                validate-trigger="input"
                :rules="[
                  { required: checked1 == 'orderly' ? true : false, message: '请输入结束卡号' },
                ]"
                no-style
                asterisk-position="end"
              >
                <a-input
                  v-model="retrieveForm.endCard"
                  :disabled="checked1 == 'orderly' ? false : true"
                  placeholder="请输入结束卡号"
                  allow-clear
                />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form-item>
        <a-form-item
          field="cardMultiline"
          :content-flex="false"
          hide-asterisk
          :merge-props="false"
          :rules="[{ required: checked1 == 'disOrder' ? true : false, message: '卡号不能为空' }]"
          :validate-trigger="['change', 'input']"
          asterisk-position="end"
        >
          <a-row :gutter="24">
            <a-col :span="2">
              <a-radio style="margin-top: 10px" v-model="checked1" value="disOrder" />
            </a-col>
            <a-col :span="22">
              <a-textarea
                :auto-size="{
                  minRows: 10,
                }"
                v-model="retrieveForm.cardMultiline"
                :disabled="checked1 == 'disOrder' ? false : true"
                placeholder="请输入卡号，一行一个"
                allow-clear
              />
            </a-col>
          </a-row>
        </a-form-item>
        <!-- <a-form-item
          field="userId"
          label="回收客户"
          hide-asterisk
          :content-flex="false"
          :merge-props="false"
          asterisk-position="end"
        >
          <a-row :gutter="24">
            <a-col :span="2" />
            <a-col :span="22">
              <a-select
                allow-search
                v-model="retrieveForm.userId"
                placeholder="请选择客户"
                allow-clear
              >
                <a-option v-for="item in userList" :key="item.id" :value="item.id">{{
                  item.userName
                }}</a-option>
              </a-select>
            </a-col>
          </a-row>
        </a-form-item>
        <a-form-item
          field="direct"
          label="回收方式"
          hide-asterisk
          :content-flex="false"
          :merge-props="false"
          asterisk-position="end"
        >
          <a-row :gutter="24">
            <a-col :span="2" />
            <a-col :span="22">
              <a-radio-group class="radio-bcg" v-model="retrieveForm.direct">
                <a-radio :value="0">
                  <template #radio="{ checked }">
                    <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                      <div className="custom-radio-card-mask">
                        <div className="custom-radio-card-mask-dot"></div> </div
                      ><div className="custom-radio-card-title">所有卡板</div>
                    </div>
                  </template>
                </a-radio>
                <a-radio :value="1">
                  <template #radio="{ checked }">
                    <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                      <div className="custom-radio-card-mask">
                        <div className="custom-radio-card-mask-dot"></div> </div
                      ><div className="custom-radio-card-title">直属卡板</div>
                    </div>
                  </template>
                </a-radio>
              </a-radio-group>
            </a-col>
          </a-row>
        </a-form-item> -->
        <a-form-item
          field="remarks"
          label="回收备注"
          hide-asterisk
          :content-flex="false"
          :merge-props="false"
          asterisk-position="end"
        >
          <a-row :gutter="24">
            <a-col :span="2" />

            <a-col :span="22">
              <a-input v-model="retrieveForm.remarks" placeholder="请输入回收备注" allow-clear />
            </a-col>
          </a-row>
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="retrieveVisible = false">取消</a-button>
          <a-button type="primary" :loading="loadings" @click="handleBeforeOkRetrieves"
            >确定</a-button
          >
        </a-space>
      </template>
    </a-modal>
    <!-- 一卡一码 -->
    <a-modal
      v-model:visible="oneCodeShow"
      @before-close="oneCodeClose"
      title="一卡一码"
      width="660px"
      :mask-closable="false"
      title-align="start"
    >
      <a-form class="huakaClass" ref="oneCodeRef" :model="oneCodeForm" :auto-label-width="true">
        <a-form-item label="操作方式" :content-flex="false" :merge-props="false">
          <a-row :gutter="24">
            <a-col :span="2">
              <a-radio
                style="margin-top: 10px; margin-bottom: 20px"
                v-model="checked1"
                value="seach"
              />
            </a-col>
            <a-col :span="22">
              <div style="text-align: left; margin-top: 5px; margin-bottom: 20px"
                >当前搜索条件下
              </div>
            </a-col>
            <a-col :span="2">
              <a-radio style="margin-top: 10px" v-model="checked1" value="orderly" />
            </a-col>
            <a-col :span="10">
              <a-form-item
                hide-asterisk
                field="addCard"
                validate-trigger="input"
                :rules="[
                  { required: checked1 == 'orderly' ? true : false, message: '请输入开始卡号' },
                ]"
                no-style
                asterisk-position="end"
              >
                <a-input
                  v-model="oneCodeForm.addCard"
                  :disabled="checked1 == 'orderly' ? false : true"
                  placeholder="请输入开始卡号"
                  allow-clear
                />
              </a-form-item>
            </a-col>
            <a-col :span="2">
              <div style="height: 1px; background-color: #000; margin-top: 16px"></div>
            </a-col>
            <a-col :span="10">
              <a-form-item
                field="endCard"
                hide-asterisk
                validate-trigger="input"
                :rules="[
                  { required: checked1 == 'orderly' ? true : false, message: '请输入结束卡号' },
                ]"
                no-style
                asterisk-position="end"
              >
                <a-input
                  v-model="oneCodeForm.endCard"
                  :disabled="checked1 == 'orderly' ? false : true"
                  placeholder="请输入结束卡号"
                  allow-clear
                />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form-item>
        <a-form-item
          field="cardMultiline"
          :content-flex="false"
          hide-asterisk
          :merge-props="false"
          :rules="[{ required: checked1 == 'disOrder' ? true : false, message: '卡号不能为空' }]"
          :validate-trigger="['change', 'input']"
          asterisk-position="end"
        >
          <a-row :gutter="24">
            <a-col :span="2">
              <a-radio style="margin-top: 10px" v-model="checked1" value="disOrder" />
            </a-col>
            <a-col :span="22">
              <a-textarea
                :auto-size="{
                  minRows: 10,
                }"
                v-model="oneCodeForm.cardMultiline"
                :disabled="checked1 == 'disOrder' ? false : true"
                placeholder="请输入卡号，一行一个"
                allow-clear
              />
            </a-col>
          </a-row>
        </a-form-item>
        <a-form-item
          field="planId"
          label="操作类型"
          hide-asterisk
          :content-flex="false"
          :merge-props="false"
          :rules="[{ required: true, message: '请选择方案' }]"
          :validate-trigger="['change', 'input']"
          asterisk-position="end"
        >
          <a-row :gutter="24">
            <a-col :span="2" />
            <a-col :span="22">
              <a-select
                v-model="oneCodeForm.planId"
                allow-search
                placeholder="请选择一卡一码方案"
                allow-clear
              >
                <a-option v-for="item in oneCodeList" :key="item.id" :value="item.id">{{
                  item.name
                }}</a-option>
              </a-select>
            </a-col>
          </a-row>
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="parameterVisible = false">取消</a-button>
          <a-button type="primary" :loading="loadings" @click="oneCodeJian">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 修改系列 -->
    <a-modal
      v-model:visible="parameterVisible"
      @before-close="handleCancelParameter"
      title="修改系列"
      width="660px"
      :mask-closable="false"
      title-align="start"
    >
      <a-form
        class="huakaClass"
        ref="parameterForms"
        :model="parameterForm"
        :auto-label-width="true"
      >
        <a-form-item label="操作方式" :content-flex="false" :merge-props="false">
          <a-row :gutter="24">
            <a-col :span="2">
              <a-radio
                style="margin-top: 10px; margin-bottom: 20px"
                v-model="checked1"
                @change="changeCardRadio"
                value="seach"
              />
            </a-col>
            <a-col :span="22">
              <div style="text-align: left; margin-top: 5px; margin-bottom: 20px"
                >当前搜索条件下
              </div>
            </a-col>
            <a-col :span="2">
              <a-radio style="margin-top: 10px" v-model="checked1" value="orderly" />
            </a-col>
            <a-col :span="10">
              <a-form-item
                hide-asterisk
                field="addCard"
                validate-trigger="input"
                :rules="[
                  { required: checked1 == 'orderly' ? true : false, message: '请输入开始卡号' },
                ]"
                no-style
                asterisk-position="end"
              >
                <a-input
                  v-model="parameterForm.addCard"
                  :disabled="checked1 == 'orderly' ? false : true"
                  placeholder="请输入开始卡号"
                  allow-clear
                />
              </a-form-item>
            </a-col>
            <a-col :span="2">
              <div style="height: 1px; background-color: #000; margin-top: 16px"></div>
            </a-col>
            <a-col :span="10">
              <a-form-item
                field="endCard"
                hide-asterisk
                validate-trigger="input"
                :rules="[
                  { required: checked1 == 'orderly' ? true : false, message: '请输入结束卡号' },
                ]"
                no-style
                asterisk-position="end"
              >
                <a-input
                  v-model="parameterForm.endCard"
                  :disabled="checked1 == 'orderly' ? false : true"
                  placeholder="请输入结束卡号"
                  allow-clear
                  @change="changeCardRadio"
                />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form-item>
        <a-form-item
          field="cardMultiline"
          :content-flex="false"
          hide-asterisk
          :merge-props="false"
          :rules="[{ required: checked1 == 'disOrder' ? true : false, message: '卡号不能为空' }]"
          :validate-trigger="['change', 'input']"
          asterisk-position="end"
        >
          <a-row :gutter="24">
            <a-col :span="2">
              <a-radio style="margin-top: 10px" v-model="checked1" value="disOrder" />
            </a-col>
            <a-col :span="22">
              <a-textarea
                :auto-size="{
                  minRows: 10,
                }"
                v-model="parameterForm.cardMultiline"
                :disabled="checked1 == 'disOrder' ? false : true"
                placeholder="请输入卡号，一行一个"
                allow-clear
                @change="changeCardRadio"
              />
            </a-col>
          </a-row>
        </a-form-item>
        <a-form-item
          field="seriesId"
          label="操作类型"
          hide-asterisk
          :content-flex="false"
          :merge-props="false"
          :rules="[{ required: true, message: '请选择系列' }]"
          :validate-trigger="['change', 'input']"
          asterisk-position="end"
        >
          <a-row :gutter="24">
            <a-col :span="2" />
            <a-col :span="22">
              <a-select
                v-model="parameterForm.seriesId"
                allow-search
                placeholder="请选择系列"
                allow-clear
              >
                <a-option v-for="item in seriesA" :key="item.id" :value="item.id">{{
                  item.name
                }}</a-option>
              </a-select>
            </a-col>
          </a-row>
        </a-form-item>
        <a-form-item
          field="remarks"
          label="修改备注"
          hide-asterisk
          :content-flex="false"
          :merge-props="false"
          asterisk-position="end"
        >
          <a-row :gutter="24">
            <a-col :span="2" />

            <a-col :span="22">
              <a-input
                v-model="parameterForm.remarks"
                placeholder="请输入修改系列备注"
                allow-clear
              />
            </a-col>
          </a-row>
        </a-form-item>
      </a-form>
      <template #footer>
        <div style="display: flex; justify-content: space-between; width: 100%">
          <a-checkbox @change="changeChecked" v-model="checked1s"
            >锁定渠道<a-tooltip content="开启锁定渠道后，渠道不可进行修改">
              <icon-question-circle style="color: var(--color-neutral-8)" /> </a-tooltip
          ></a-checkbox>
          <a-space>
            <a-button @click="parameterVisible = false">取消</a-button>
            <a-button type="primary" :loading="loadings" @click="handleBeforeOkParameters"
              >确定</a-button
            >
          </a-space>
        </div>
      </template>
    </a-modal>
    <!-- 分销操作 -->
    <a-modal
      v-model:visible="huakavisible"
      @before-close="handleCancelhuaka"
      title="分销操作"
      width="660px"
      :mask-closable="false"
      title-align="start"
    >
      <a-form class="huakaClass" ref="huakaForms" :model="huakaForm" :auto-label-width="true">
        <a-form-item
          field="userId"
          label="分销客户"
          hide-asterisk
          :content-flex="false"
          :merge-props="false"
          :rules="[{ required: true, message: '客户不能为空' }]"
          :validate-trigger="['change', 'input']"
          asterisk-position="end"
        >
          <a-row :gutter="24">
            <a-col :span="2" />

            <a-col :span="22">
              <a-select
                v-model="huakaForm.userId"
                placeholder="请选择客户"
                allow-search
                allow-clear
                :options="userList"
                :virtual-list-props="{ height: 200 }"
            /></a-col>
          </a-row>
        </a-form-item>
        <a-form-item label="分销卡号" :content-flex="false" :merge-props="false">
          <a-row :gutter="24">
            <a-col :span="2">
              <a-radio
                style="margin-top: 10px; margin-bottom: 20px"
                v-model="checked1"
                value="seach"
              />
            </a-col>
            <a-col :span="22">
              <div style="text-align: left; margin-top: 5px; margin-bottom: 20px"
                >当前搜索条件下
              </div>
            </a-col>
            <a-col :span="2">
              <a-radio style="margin-top: 10px" v-model="checked1" value="orderly" />
            </a-col>
            <a-col :span="10">
              <a-form-item
                hide-asterisk
                field="addCard"
                validate-trigger="input"
                :rules="[
                  { required: checked1 == 'orderly' ? true : false, message: '请输入开始卡号' },
                ]"
                no-style
                asterisk-position="end"
              >
                <a-input
                  v-model="huakaForm.addCard"
                  :disabled="checked1 == 'orderly' ? false : true"
                  placeholder="请输入开始卡号"
                  allow-clear
                />
              </a-form-item>
            </a-col>
            <a-col :span="2">
              <div style="height: 1px; background-color: #000; margin-top: 16px"></div>
            </a-col>
            <a-col :span="10">
              <a-form-item
                field="endCard"
                hide-asterisk
                validate-trigger="input"
                :rules="[
                  { required: checked1 == 'orderly' ? true : false, message: '请输入结束卡号' },
                ]"
                no-style
                asterisk-position="end"
              >
                <a-input
                  v-model="huakaForm.endCard"
                  :disabled="checked1 == 'orderly' ? false : true"
                  placeholder="请输入结束卡号"
                  allow-clear
                />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form-item>
        <a-form-item
          field="cardMultiline"
          :content-flex="false"
          hide-asterisk
          :merge-props="false"
          :rules="[{ required: checked1 == 'disOrder' ? true : false, message: '卡号不能为空' }]"
          :validate-trigger="['change', 'input']"
          asterisk-position="end"
        >
          <a-row :gutter="24">
            <a-col :span="2">
              <a-radio style="margin-top: 10px" v-model="checked1" value="disOrder" />
            </a-col>
            <a-col :span="22">
              <a-textarea
                :auto-size="{
                  minRows: 10,
                }"
                v-model="huakaForm.cardMultiline"
                :disabled="checked1 == 'disOrder' ? false : true"
                placeholder="请输入卡号，一行一个"
                allow-clear
              />
            </a-col>
          </a-row>
        </a-form-item>
        <a-form-item
          field="remarks"
          label="分销备注"
          hide-asterisk
          :content-flex="false"
          :merge-props="false"
          asterisk-position="end"
        >
          <a-row :gutter="24">
            <a-col :span="2" />

            <a-col :span="22">
              <a-input v-model="huakaForm.remarks" placeholder="请输入划卡备注" allow-clear />
            </a-col>
          </a-row>
        </a-form-item>
      </a-form>
      <a-divider type="dashed" :margin="20">常见问题</a-divider>
      <a-collapse>
        <a-collapse-item header="为什么会有不可划卡卡号，具体是什么意思？" key="1">
          <div>1：不可划卡卡号指的卡号是已经划卡给下级客户 </div>
          <div>2：解决方法：将不可划卡的卡号进行回收操作，再次划卡就可以划卡了</div>
        </a-collapse-item>
      </a-collapse>
      <template #footer>
        <a-space>
          <a-button @click="huakavisible = false">取消</a-button>
          <a-button type="primary" :loading="loadings" @click="handleBeforeOkhuakas">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 提示弹窗 -->
    <a-modal
      v-model:visible="jiancevisible"
      @before-close="jiancevisible = false"
      width="600px"
      :mask-closable="false"
      title-align="start"
    >
      <template #title> 操作结果 </template>
      <!-- <p style="text-align: center; font-size: 16px">{{ names }}卡号数据： </p> -->
      <a-alert type="warning" :show-icon="false">
        <div style="text-align: center; font-size: 13px"
          >{{ names }}卡号数据：总{{ names }}卡号：<span style="color: #3491fa"
            >{{ jianceForm.total }}张</span
          >，可{{ names }}卡号：<span style="color: #3491fa">{{ jianceForm.success }}张</span
          >，不可{{ names }}卡号：<span style="color: #3491fa">{{ jianceForm.error }}张</span></div
        >
      </a-alert>
      <a-alert style="margin-top: 20px" type="error" :show-icon="false">
        <div style="text-align: center; font-size: 13px; color: #f53f3f">
          {{ names }}时一定要仔细核实好卡号和数量，避免造成不可挽回的损失</div
        >
      </a-alert>
      <p v-if="jianceForm.repeats" style="text-align: center; font-size: 16px"
        >重复卡号数据：<span style="color: #3491fa" v-for="item in jianceForm.repeats" :key="item"
          >{{ item }}&nbsp; &nbsp;</span
        >
      </p>
      <p v-if="jianceForm.notExists" style="text-align: center; font-size: 16px"
        >不存在卡号数据：<span
          style="color: #3491fa"
          v-for="item in jianceForm.notExists"
          :key="item"
          >{{ item }}&nbsp; &nbsp;</span
        >
      </p>
    </a-modal>
    <!-- 操作结果 -->
    <a-modal
      v-model:visible="jieguo"
      @before-close="jieguo = false"
      width="600px"
      :mask-closable="false"
      title-align="start"
    >
      <template #title> 检测结果 </template>
      <!-- <p style="text-align: center; font-size: 16px">{{ names }}卡号数据： </p> -->
      <div v-if="jianceForm.total > 1000">
        <a-alert type="warning" :show-icon="false">
          <div style="font-size: 13px">
            正在进行操作卡板{{ names }}，{{ names }}总数量{{
              jianceForm.total
            }}张，该操作不可逆，一旦操作成功数据将会改变。请输入下面内容再次确认操作。</div
          >
        </a-alert>
        <a-alert style="margin-top: 20px" type="error" :show-icon="false">
          <div style="text-align: center; font-size: 13px; color: #f53f3f">
            我确认操作总数量{{ jianceForm.total }}张卡的{{ names }}，确认操作无误</div
          >
        </a-alert>
        <a-input
          v-model="errorValue"
          style="margin-top: 20px"
          placeholder="请输入'确认操作'后，点击确定"
          :error="error"
          onpaste="return false"
        />
        <div style="font-size: 13px; margin-top: 10px"
          >当前操作只有在操作数量超过1000张的时候才会出现，只是为了避免操作失误</div
        >
      </div>
      <div v-else>
        <a-alert type="warning" :show-icon="false">
          <div style="text-align: center; font-size: 13px"
            >{{ names }}卡号数据：总{{ names }}卡号：<span style="color: #3491fa"
              >{{ jianceForm.total }}张</span
            >，可{{ names }}卡号：<span style="color: #3491fa">{{ jianceForm.success }}张</span
            >，不可{{ names }}卡号：<span style="color: #3491fa"
              >{{ jianceForm.error }}张</span
            ></div
          >
        </a-alert>
        <a-alert style="margin-top: 20px" type="error" :show-icon="false">
          <div style="text-align: center; font-size: 13px; color: #f53f3f">
            {{ names }}时一定要仔细核实好卡号和数量，避免造成不可挽回的损失</div
          >
        </a-alert>
        <p v-if="jianceForm.repeats" style="text-align: center; font-size: 16px"
          >重复卡号数据：<span style="color: #3491fa" v-for="item in jianceForm.repeats" :key="item"
            >{{ item }}&nbsp; &nbsp;</span
          >
        </p>
        <p v-if="jianceForm.notExists" style="text-align: center; font-size: 16px"
          >不存在卡号数据：<span
            style="color: #3491fa"
            v-for="item in jianceForm.notExists"
            :key="item"
            >{{ item }}&nbsp; &nbsp;</span
          >
        </p>
      </div>
      <template #footer>
        <a-space>
          <a-button @click="jieguo = false">取消</a-button>
          <a-button type="primary" :loading="loadings" @click="conset">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 多卡搜索 -->
    <a-modal
      v-model:visible="cardsVisible"
      @before-close="cardsVisible = false"
      title="多条件搜索"
      width="600px"
      :mask-closable="false"
      title-align="start"
    >
      <a-form :auto-label-width="true" :model="form">
        <a-form-item field="remarks" hide-label>
          <a-textarea v-model="card" placeholder="请输入搜索条件，一行一个" allow-clear />
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="cardsVisible = false">取消</a-button>
          <a-button type="primary" @click="cardsFn">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 卡板注销 -->
    <a-modal
      v-model:visible="cancelVisible"
      @before-close="cancelCFn"
      title="卡板注销"
      width="600px"
      :mask-closable="false"
      title-align="start"
    >
      <a-form ref="cancelRef" :auto-label-width="true" :model="cancelForm">
        <a-form-item
          field="cancellationGroupId"
          label="注销分类"
          :rules="[{ required: true, message: '注销分类不能为空' }]"
          :validate-trigger="['change', 'input']"
          asterisk-position="end"
        >
          <a-select
            v-model="cancelForm.cancellationGroupId"
            placeholder="请选择注销分类"
            allow-clear
          >
            <a-option v-for="item in cancelMold" :key="item.id" :value="item.id">{{
              item.name
            }}</a-option>
          </a-select>
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="cancelCFn">取消</a-button>
          <a-button type="primary" :loading="loadings" @click="cancelSub">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 修改密码 -->
    <a-modal
      v-model:visible="passWordVisible"
      @before-close="passWordCFn"
      title="修改密码"
      width="600px"
      :mask-closable="false"
      title-align="start"
    >
      <a-form ref="passWordRef" :auto-label-width="true" :model="passWordForm">
        <a-form-item
          field="passWord"
          label="新密码"
          :rules="[{ required: true, message: '新密码不能为空' }]"
          :validate-trigger="['change', 'input']"
          asterisk-position="end"
        >
          <a-input v-model="passWordForm.passWord" placeholder="请输入新密码" allow-clear />
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="passWordCFn">取消</a-button>
          <a-button type="primary" :loading="loadings" @click="passWordSub">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 充值余额 -->
    <a-modal
      v-model:visible="balanceVisible"
      @before-close="balanceCFn"
      title="充值余额"
      width="600px"
      :mask-closable="false"
      title-align="start"
    >
      <a-form ref="balanceRef" :auto-label-width="true" :model="balanceForm">
        <a-form-item field="balance" label="卡板余额">
          <span style="color: #3491fa">{{ balanceForm.balance1 }} 元</span>
        </a-form-item>
        <a-form-item field="type" label="充值类型">
          <a-radio-group class="radio-bcg" v-model="balanceForm.type">
            <a-radio :value="0">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">加款</div>
                </div>
              </template>
            </a-radio>
            <a-radio :value="1">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">扣款</div>
                </div>
              </template>
            </a-radio>
            <a-radio :value="2">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">最终金额</div>
                </div>
              </template>
            </a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item
          field="balance"
          label="充值金额"
          :rules="[{ required: true, message: '充值金额不能为空' }]"
          :validate-trigger="['change', 'input']"
          asterisk-position="end"
        >
          <a-input-number v-model="balanceForm.balance" placeholder="请输入充值金额" allow-clear />
        </a-form-item>
        <a-form-item field="remark" label="充值备注" asterisk-position="end">
          <a-input v-model="balanceForm.remark" placeholder="请输入充值备注" allow-clear />
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="balanceCFn">取消</a-button>
          <a-button type="primary" :loading="loadings" @click="balanceSub">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 充值套餐 -->
    <a-modal
      v-model:visible="mealVisible"
      @before-close="mealCFn"
      title="充值套餐"
      width="600px"
      :mask-closable="false"
      title-align="start"
    >
      <a-form ref="mealRef" :auto-label-width="true" :model="mealForm">
        <a-form-item label="充值套餐" :content-flex="false" :merge-props="false">
          <a-row :gutter="24">
            <a-col :span="24">
              <a-form-item
                hide-asterisk
                field="setMealId"
                validate-trigger="input"
                :rules="[{ required: true, message: '请选择充值套餐' }]"
                asterisk-position="end"
                no-style
              >
                <a-select
                  @change="changeMeal"
                  v-model="mealForm.setMealId"
                  placeholder="请选择充值套餐"
                  allow-clear
                >
                  <a-option v-for="item in lists" :key="item.id" :value="item.id">{{
                    item.name
                  }}</a-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form-item>
        <a-form-item label="订单时间" :content-flex="false" :merge-props="false">
          <a-row :gutter="24">
            <a-col :span="24">
              <a-form-item
                field="next"
                hide-asterisk
                validate-trigger="input"
                :rules="[
                  {
                    required: true,
                    message: '请选择充值类型',
                  },
                ]"
                no-style
                asterisk-position="end"
              >
                <a-radio-group class="radio-bcg" :disabled="lis" v-model="mealForm.next">
                  <a-radio :value="0">
                    <template #radio="{ checked }">
                      <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                        <div className="custom-radio-card-mask">
                          <div className="custom-radio-card-mask-dot"></div> </div
                        ><div className="custom-radio-card-title">本月</div>
                      </div>
                    </template>
                  </a-radio>
                  <a-radio :value="1">
                    <template #radio="{ checked }">
                      <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                        <div className="custom-radio-card-mask">
                          <div className="custom-radio-card-mask-dot"></div> </div
                        ><div className="custom-radio-card-title">次月</div>
                      </div>
                    </template>
                  </a-radio>
                </a-radio-group>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form-item>

        <a-form-item
          field="upstream"
          label="提交上游"
          :rules="[{ required: true, message: '提交上游不能为空' }]"
          :validate-trigger="['change', 'input']"
          asterisk-position="end"
        >
          <a-radio-group class="radio-bcg" v-model="mealForm.upstream">
            <a-radio :value="1">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div> </div
                  ><div className="custom-radio-card-title">提交</div>
                </div>
              </template>
            </a-radio>
            <a-radio :value="0">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div> </div
                  ><div className="custom-radio-card-title">不提交</div>
                </div>
              </template>
            </a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item field="remarks" label="充值备注" asterisk-position="end">
          <a-input v-model="mealForm.remarks" placeholder="请输入充值备注" allow-clear />
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="mealCFn">取消</a-button>
          <a-button type="primary" @click="mealSub">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 智能检测 -->
    <a-modal
      v-model:visible="zhiVisible"
      title="智能检测"
      width="50%"
      :mask-closable="false"
      title-align="center"
    >
      <div class="table">
        <div class="title">
          <div class="name">检测类型</div>
          <div class="name">检测描述</div>
          <div class="name">检测结果</div>
        </div>
        <div class="list">
          <div class="names">卡板状态</div>
          <div class="names"
            ><a-tag v-if="detail.id" :color="detail.stateName.color">{{
              detail.stateName.name
            }}</a-tag></div
          >
          <div class="names">
            <span v-if="detail.id && detail.state == 0" style="color: #3491fa">正常</span>
            <span v-else style="color: #f53f3f">异常</span>
          </div>
        </div>
        <div class="list">
          <div class="names">总流量</div>
          <div class="names"
            ><span v-if="detail.free != undefined">
              {{ Math.floor(((detail.used + detail.free) / 1024) * 100) / 100 }}G</span
            >
            <span v-else>无限</span></div
          >
          <div class="names">
            <span v-if="detail.id && detail.free == 0" style="color: #f53f3f">异常</span>
            <span v-else style="color: #3491fa">正常</span>
          </div>
        </div>
        <div class="list">
          <div class="names">已用流量</div>
          <div class="names"
            ><span v-if="detail.used != undefined"
              >{{ Math.floor((detail.used / 1024) * 100) / 100 }}G</span
            >
            <span v-else> - - -</span></div
          >
          <div class="names"
            ><span v-if="detail.id && detail.used != undefined" style="color: #3491fa">正常</span>
            <span v-else style="color: #f53f3f">异常</span></div
          >
        </div>
        <div class="list">
          <div class="names">剩余流量</div>
          <div class="names"
            ><span v-if="detail.free != undefined"
              >{{ Math.floor((detail.free / 1024) * 100) / 100 }}G</span
            >
            <span v-else>无限</span></div
          >
          <div class="names">
            <span v-if="detail.id && detail.free == 0" style="color: #f53f3f">异常</span>
            <span v-else style="color: #3491fa">正常</span></div
          >
        </div>
        <div class="list">
          <div class="names">在线状态</div>
          <div class="names"
            ><span v-if="detail.online === 0">在线</span>
            <span v-if="detail.online === 1">离线</span>
            <span v-else>未知</span></div
          >
          <div class="names"
            ><span v-if="detail.online == 0" style="color: #3491fa">正常</span>
            <span v-else style="color: #f53f3f">异常</span></div
          >
        </div>
        <div class="list">
          <div class="names">官方实名</div>
          <div class="names"
            ><a-tag color="blue" v-if="detail.officialRealName == 0">已实名</a-tag>
            <a-tag v-else-if="detail.officialRealName == 1">未实名</a-tag>
            <a-tag v-else>未知</a-tag></div
          >
          <div class="names"
            ><span v-if="detail.id && detail.officialRealName == 0" style="color: #3491fa"
              >正常</span
            >
            <span v-else style="color: #f53f3f">异常</span></div
          >
        </div>
        <div class="list">
          <div class="names">到期时间</div>
          <div class="names"
            ><span v-if="detail.expirationTime">{{ detail.expirationTime }}</span>
            <span v-else>- - -</span></div
          >
          <div class="names"
            ><span v-if="detail.id && detail.expirationTime" style="color: #3491fa">正常</span>
            <span v-else style="color: #f53f3f">异常</span></div
          >
        </div>
        <div class="list">
          <div class="names">检测结果</div>
          <div
            v-if="
              !detail.exceptionType &&
              detail.officialRealName == 0 &&
              detail.free > 0 &&
              detail.firstPayTime &&
              detail.state == 0
            "
            class="namesa"
            style="color: #3491fa; line-height: 25px; padding: 10px"
            >检测结果一切正常，若仍然无法使用，请引导客户设置APN然后重启设备，等待5分钟后重试【无需设置APN的请直接忽略】</div
          >
          <div v-else class="namesa" style="color: red">
            <span v-if="detail.state != 0">当前卡号状态异常</span>
            <span v-else-if="!detail.firstPayTime">当前卡号未充值套餐</span>
            <span v-else-if="detail.officialRealName !== 0">当前卡号未官方实名</span>
            <span v-else-if="detail.free <= 0 && detail.firstPayTime">可用流量已用尽</span>
            <span v-else-if="detail.free <= 0">当前流量已用完</span>
            <span v-else-if="detail.chong">{{ detail.chong }}</span>
            <span v-else-if="detail.disconnectionId">达量断网停机</span>
            <span v-else-if="detail.free">
              <span v-if="detail.free + detail.used <= 0 && !detail.firstPayTime"
                >当前卡号未充值本月套餐</span
              >
              <span
                v-else-if="
                  detail.state == 4 &&
                  !detail.exceptionType &&
                  detail.firstPayTime &&
                  detail.free > 0
                "
                >网络异常</span
              >
            </span>
            <span v-else-if="!detail.free">
              <span v-if="detail.used <= 0 && !detail.firstPayTime">当前卡号未充值本月套餐</span>
              <span v-else-if="detail.state == 4 && !detail.exceptionType && detail.firstPayTime"
                >网络异常</span
              >
            </span>
          </div>
        </div>
      </div>

      <template #footer>
        <a-space />
      </template>
    </a-modal>
    <!-- 批量操作 -->
    <a-modal
      v-model:visible="batchShow"
      title="批量操作"
      width="40%"
      :mask-closable="false"
      title-align="start"
      @before-close="closeBatch"
    >
      <div class="pilianglokolo">
        <a-tabs v-model:active-key="activeBatch" type="line" position="left" @tab-click="tabclicks">
          <a-tab-pane key="1" title="批量刷新">
            <a-form
              class="huakaClass"
              ref="batchRef"
              :model="batchForm"
              :auto-label-width="true"
              @submit="batchRefFn"
            >
              <a-form-item label="操作方式" :content-flex="false" :merge-props="false">
                <a-row :gutter="24">
                  <a-col :span="2">
                    <a-radio style="margin-top: 10px" v-model="batchChecked" value="seach" />
                  </a-col>
                  <a-col :span="22">
                    <div style="text-align: left; margin-top: 5px">当前搜索条件下 </div>
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item :content-flex="false" :merge-props="false">
                <a-row :gutter="24">
                  <a-col :span="2">
                    <a-radio style="margin-top: 10px" v-model="batchChecked" value="orderly" />
                  </a-col>
                  <a-col :span="10">
                    <a-form-item
                      hide-asterisk
                      field="addCard"
                      validate-trigger="input"
                      :rules="[
                        {
                          required: batchChecked == 'orderly' ? true : false,
                          message: '请输入开始卡号',
                        },
                      ]"
                      no-style
                      asterisk-position="end"
                    >
                      <a-input
                        v-model="batchForm.addCard"
                        :disabled="batchChecked == 'orderly' ? false : true"
                        placeholder="请输入开始卡号"
                        allow-clear
                      />
                    </a-form-item>
                  </a-col>
                  <a-col :span="2">
                    <div style="height: 1px; background-color: #000; margin-top: 16px"></div>
                  </a-col>
                  <a-col :span="10">
                    <a-form-item
                      field="endCard"
                      hide-asterisk
                      validate-trigger="input"
                      :rules="[
                        {
                          required: batchChecked == 'orderly' ? true : false,
                          message: '请输入结束卡号',
                        },
                      ]"
                      no-style
                      asterisk-position="end"
                    >
                      <a-input
                        v-model="batchForm.endCard"
                        :disabled="batchChecked == 'orderly' ? false : true"
                        placeholder="请输入结束卡号"
                        allow-clear
                      />
                    </a-form-item>
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item
                field="cardMultiline"
                :content-flex="false"
                hide-asterisk
                :merge-props="false"
                :rules="[
                  {
                    required: batchChecked == 'disOrder' ? true : false,
                    message: '卡号不能为空',
                  },
                ]"
                :validate-trigger="['change', 'input']"
                asterisk-position="end"
              >
                <a-row :gutter="24">
                  <a-col :span="2">
                    <a-radio style="margin-top: 10px" v-model="batchChecked" value="disOrder" />
                  </a-col>
                  <a-col :span="22">
                    <a-textarea
                      :auto-size="{
                        minRows: 10,
                      }"
                      v-model="batchForm.cardMultiline"
                      :disabled="batchChecked == 'disOrder' ? false : true"
                      placeholder="请输入卡号，一行一个"
                      allow-clear
                    />
                  </a-col>
                </a-row>
              </a-form-item>
              <!-- <a-form-item
                field="time"
                label="时间间隔"
                hide-asterisk
                :content-flex="false"
                :merge-props="false"
                :rules="[{ required: true, message: '时间间隔不能为空' }]"
                :validate-trigger="['change', 'input']"
                asterisk-position="end"
              >
                <a-row :gutter="24">
                  <a-col :span="2" />
                  <a-col :span="22">
                    <a-input-number
                      v-model="batchForm.time"
                      placeholder="请输入时间间隔"
                      allow-clear
                      hide-button
                      :min="3"
                    >
                      <template #suffix> 秒 </template>
                    </a-input-number>
                  </a-col>
                </a-row>
              </a-form-item> -->
              <a-form-item
                field="remarks"
                label="操作类型"
                hide-asterisk
                :content-flex="false"
                :merge-props="false"
              >
                <a-row :gutter="24">
                  <a-col :span="2" />
                  <a-col :span="22">
                    <a-radio-group class="radio-bcg" v-model="batchForm.type">
                      <a-radio :value="3">
                        <template #radio="{ checked }">
                          <div
                            style="display: flex"
                            :class="{ 'custom-radio-card-checked': checked }"
                          >
                            <div className="custom-radio-card-mask">
                              <div className="custom-radio-card-mask-dot"></div> </div
                            ><div className="custom-radio-card-title">三合一刷新</div>
                          </div>
                        </template>
                      </a-radio>
                      <a-radio :value="0">
                        <template #radio="{ checked }">
                          <div
                            style="display: flex"
                            :class="{ 'custom-radio-card-checked': checked }"
                          >
                            <div className="custom-radio-card-mask">
                              <div className="custom-radio-card-mask-dot"></div> </div
                            ><div className="custom-radio-card-title">使用流量</div>
                          </div>
                        </template>
                      </a-radio>
                      <a-radio :value="1">
                        <template #radio="{ checked }">
                          <div
                            style="display: flex"
                            :class="{ 'custom-radio-card-checked': checked }"
                          >
                            <div className="custom-radio-card-mask">
                              <div className="custom-radio-card-mask-dot"></div> </div
                            ><div className="custom-radio-card-title">卡板状态</div>
                          </div>
                        </template>
                      </a-radio>
                      <a-radio :value="2">
                        <template #radio="{ checked }">
                          <div
                            style="display: flex"
                            :class="{ 'custom-radio-card-checked': checked }"
                          >
                            <div className="custom-radio-card-mask">
                              <div className="custom-radio-card-mask-dot"></div> </div
                            ><div className="custom-radio-card-title">官方实名</div>
                          </div>
                        </template>
                      </a-radio>
                    </a-radio-group>
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item :content-flex="false" :merge-props="false">
                <a-row :gutter="24">
                  <a-col :span="2" />
                  <a-col :span="22">
                    <a-button type="primary" html-type="submit" long>立即执行</a-button>
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item v-if="batchList.length > 0" :content-flex="false" :merge-props="false">
                <a-row :gutter="24">
                  <a-col :span="2" />
                  <a-col :span="22">
                    <a-row style="margin-bottom: 10px">
                      <a-col :span="6"> 卡板数量:{{ batchList.length }} </a-col>
                      <a-col :span="6"> 成功数量:{{ zong.success }} </a-col>
                      <a-col :span="6"> 失败数量{{ zong.error }} </a-col>
                    </a-row>
                  </a-col>
                  <a-col :span="2" />
                  <a-col :span="22" style="margin-bottom: 10px">
                    <a-progress
                      :show-text="false"
                      size="large"
                      :percent="(zong.success + zong.error) / batchList.length"
                    />
                  </a-col>
                  <a-col :span="2" />
                  <a-col :span="22">
                    <div
                      style="
                        width: 100%;
                        height: 100px;
                        background-color: #f2f3f5;
                        overflow-y: scroll;
                        padding: 0 15px;
                      "
                    >
                      <div v-for="item in errorList" :key="item">
                        {{ item }}
                      </div>
                    </div>
                  </a-col>
                </a-row>
              </a-form-item>
            </a-form>
          </a-tab-pane>
          <a-tab-pane key="2" title="停机复机">
            <a-form
              class="huakaClass"
              ref="batchRef1"
              :model="batchForm"
              :auto-label-width="true"
              @submit="batchRefFn1"
            >
              <a-form-item label="操作方式" :content-flex="false" :merge-props="false">
                <a-row :gutter="24">
                  <a-col :span="2">
                    <a-radio style="margin-top: 10px" v-model="batchChecked" value="seach" />
                  </a-col>
                  <a-col :span="22">
                    <div style="text-align: left; margin-top: 5px">当前搜索条件下 </div>
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item :content-flex="false" :merge-props="false">
                <a-row :gutter="24">
                  <a-col :span="2">
                    <a-radio style="margin-top: 10px" v-model="batchChecked" value="orderly" />
                  </a-col>
                  <a-col :span="10">
                    <a-form-item
                      hide-asterisk
                      field="addCard"
                      validate-trigger="input"
                      :rules="[
                        {
                          required: batchChecked == 'orderly' ? true : false,
                          message: '请输入开始卡号',
                        },
                      ]"
                      no-style
                      asterisk-position="end"
                    >
                      <a-input
                        v-model="batchForm.addCard"
                        :disabled="batchChecked == 'orderly' ? false : true"
                        placeholder="请输入开始卡号"
                        allow-clear
                      />
                    </a-form-item>
                  </a-col>
                  <a-col :span="2">
                    <div style="height: 1px; background-color: #000; margin-top: 16px"></div>
                  </a-col>
                  <a-col :span="10">
                    <a-form-item
                      field="endCard"
                      hide-asterisk
                      validate-trigger="input"
                      :rules="[
                        {
                          required: batchChecked == 'orderly' ? true : false,
                          message: '请输入结束卡号',
                        },
                      ]"
                      no-style
                      asterisk-position="end"
                    >
                      <a-input
                        v-model="batchForm.endCard"
                        :disabled="batchChecked == 'orderly' ? false : true"
                        placeholder="请输入结束卡号"
                        allow-clear
                      />
                    </a-form-item>
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item
                field="cardMultiline"
                :content-flex="false"
                hide-asterisk
                :merge-props="false"
                :rules="[
                  {
                    required: batchChecked == 'disOrder' ? true : false,
                    message: '卡号不能为空',
                  },
                ]"
                :validate-trigger="['change', 'input']"
                asterisk-position="end"
              >
                <a-row :gutter="24">
                  <a-col :span="2">
                    <a-radio style="margin-top: 10px" v-model="batchChecked" value="disOrder" />
                  </a-col>
                  <a-col :span="22">
                    <a-textarea
                      :auto-size="{
                        minRows: 10,
                      }"
                      v-model="batchForm.cardMultiline"
                      :disabled="batchChecked == 'disOrder' ? false : true"
                      placeholder="请输入卡号，一行一个"
                      allow-clear
                    />
                  </a-col>
                </a-row>
              </a-form-item>
              <!-- <a-form-item
                field="time"
                label="时间间隔"
                hide-asterisk
                :content-flex="false"
                :merge-props="false"
                :rules="[{ required: true, message: '时间间隔不能为空' }]"
                :validate-trigger="['change', 'input']"
                asterisk-position="end"
              >
                <a-row :gutter="24">
                  <a-col :span="2" />
                  <a-col :span="22">
                    <a-input-number
                      v-model="batchForm.time"
                      placeholder="请输入时间间隔"
                      allow-clear
                      hide-button
                      :min="3"
                    >
                      <template #suffix> 秒 </template>
                    </a-input-number>
                  </a-col>
                </a-row>
              </a-form-item> -->
              <a-form-item
                field="remarks"
                label="操作类型"
                hide-asterisk
                :content-flex="false"
                :merge-props="false"
              >
                <a-row :gutter="24">
                  <a-col :span="2" />
                  <a-col :span="22">
                    <a-radio-group class="radio-bcg" v-model="batchForm.type">
                      <a-radio :value="0">
                        <template #radio="{ checked }">
                          <div
                            style="display: flex"
                            :class="{ 'custom-radio-card-checked': checked }"
                          >
                            <div className="custom-radio-card-mask">
                              <div className="custom-radio-card-mask-dot"></div> </div
                            ><div className="custom-radio-card-title">停机</div>
                          </div>
                        </template>
                      </a-radio>
                      <a-radio :value="1">
                        <template #radio="{ checked }">
                          <div
                            style="display: flex"
                            :class="{ 'custom-radio-card-checked': checked }"
                          >
                            <div className="custom-radio-card-mask">
                              <div className="custom-radio-card-mask-dot"></div> </div
                            ><div className="custom-radio-card-title">复机</div>
                          </div>
                        </template>
                      </a-radio>
                    </a-radio-group>
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item :content-flex="false" :merge-props="false">
                <a-row :gutter="24">
                  <a-col :span="2" />
                  <a-col :span="22">
                    <a-button type="primary" html-type="submit" long>立即执行</a-button>
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item v-if="batchList.length > 0" :content-flex="false" :merge-props="false">
                <a-row :gutter="24">
                  <a-col :span="2" />
                  <a-col :span="22">
                    <a-row style="margin-bottom: 10px">
                      <a-col :span="6"> 卡板数量:{{ batchList.length }} </a-col>
                      <a-col :span="6"> 成功数量:{{ zong.success }} </a-col>
                      <a-col :span="6"> 失败数量{{ zong.error }} </a-col>
                    </a-row>
                  </a-col>
                  <a-col :span="2" />
                  <a-col :span="22" style="margin-bottom: 10px">
                    <a-progress
                      :show-text="false"
                      size="large"
                      :percent="(zong.success + zong.error) / batchList.length"
                    />
                  </a-col>
                  <a-col :span="2" />
                  <a-col :span="22">
                    <div
                      style="
                        width: 100%;
                        height: 100px;
                        background-color: #f2f3f5;
                        overflow-y: scroll;
                        padding: 0 15px;
                      "
                    >
                      <div v-for="item in errorList" :key="item">
                        {{ item }}
                      </div>
                    </div>
                  </a-col>
                </a-row>
              </a-form-item>
            </a-form>
          </a-tab-pane>
          <a-tab-pane key="3" title="删除实名">
            <a-form
              class="huakaClass"
              ref="batchRef2"
              :model="batchForm"
              :auto-label-width="true"
              @submit="batchRefFn2"
            >
              <a-form-item label="操作方式" :content-flex="false" :merge-props="false">
                <a-row :gutter="24">
                  <a-col :span="2">
                    <a-radio style="margin-top: 10px" v-model="batchChecked" value="seach" />
                  </a-col>
                  <a-col :span="22">
                    <div style="text-align: left; margin-top: 5px">当前搜索条件下 </div>
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item :content-flex="false" :merge-props="false">
                <a-row :gutter="24">
                  <a-col :span="2">
                    <a-radio style="margin-top: 10px" v-model="batchChecked" value="orderly" />
                  </a-col>
                  <a-col :span="10">
                    <a-form-item
                      hide-asterisk
                      field="addCard"
                      validate-trigger="input"
                      :rules="[
                        {
                          required: batchChecked == 'orderly' ? true : false,
                          message: '请输入开始卡号',
                        },
                      ]"
                      no-style
                      asterisk-position="end"
                    >
                      <a-input
                        v-model="batchForm.addCard"
                        :disabled="batchChecked == 'orderly' ? false : true"
                        placeholder="请输入开始卡号"
                        allow-clear
                      />
                    </a-form-item>
                  </a-col>
                  <a-col :span="2">
                    <div style="height: 1px; background-color: #000; margin-top: 16px"></div>
                  </a-col>
                  <a-col :span="10">
                    <a-form-item
                      field="endCard"
                      hide-asterisk
                      validate-trigger="input"
                      :rules="[
                        {
                          required: batchChecked == 'orderly' ? true : false,
                          message: '请输入结束卡号',
                        },
                      ]"
                      no-style
                      asterisk-position="end"
                    >
                      <a-input
                        v-model="batchForm.endCard"
                        :disabled="batchChecked == 'orderly' ? false : true"
                        placeholder="请输入结束卡号"
                        allow-clear
                      />
                    </a-form-item>
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item
                field="cardMultiline"
                :content-flex="false"
                hide-asterisk
                :merge-props="false"
                :rules="[
                  {
                    required: batchChecked == 'disOrder' ? true : false,
                    message: '卡号不能为空',
                  },
                ]"
                :validate-trigger="['change', 'input']"
                asterisk-position="end"
              >
                <a-row :gutter="24">
                  <a-col :span="2">
                    <a-radio style="margin-top: 10px" v-model="batchChecked" value="disOrder" />
                  </a-col>
                  <a-col :span="22">
                    <a-textarea
                      :auto-size="{
                        minRows: 10,
                      }"
                      v-model="batchForm.cardMultiline"
                      :disabled="batchChecked == 'disOrder' ? false : true"
                      placeholder="请输入卡号，一行一个"
                      allow-clear
                    />
                  </a-col>
                </a-row>
              </a-form-item>
              <!-- <a-form-item
                field="time"
                label="时间间隔"
                hide-asterisk
                :content-flex="false"
                :merge-props="false"
                :rules="[{ required: true, message: '时间间隔不能为空' }]"
                :validate-trigger="['change', 'input']"
                asterisk-position="end"
              >
                <a-row :gutter="24">
                  <a-col :span="2" />
                  <a-col :span="22">
                    <a-input-number
                      v-model="batchForm.time"
                      placeholder="请输入时间间隔"
                      allow-clear
                      hide-button
                      :min="3"
                    >
                      <template #suffix> 秒 </template>
                    </a-input-number>
                  </a-col>
                </a-row>
              </a-form-item> -->
              <a-form-item
                field="remarks"
                label="操作类型"
                hide-asterisk
                :content-flex="false"
                :merge-props="false"
              >
                <a-row :gutter="24">
                  <a-col :span="2" />
                  <a-col :span="22">
                    <a-radio-group class="radio-bcg" v-model="batchForm.type">
                      <a-radio :value="0">
                        <template #radio="{ checked }">
                          <div
                            style="display: flex"
                            :class="{ 'custom-radio-card-checked': checked }"
                          >
                            <div className="custom-radio-card-mask">
                              <div className="custom-radio-card-mask-dot"></div> </div
                            ><div className="custom-radio-card-title">系统实名</div>
                          </div>
                        </template>
                      </a-radio>
                      <a-radio :value="1">
                        <template #radio="{ checked }">
                          <div
                            style="display: flex"
                            :class="{ 'custom-radio-card-checked': checked }"
                          >
                            <div className="custom-radio-card-mask">
                              <div className="custom-radio-card-mask-dot"></div> </div
                            ><div className="custom-radio-card-title">官方实名</div>
                          </div>
                        </template>
                      </a-radio>
                    </a-radio-group>
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item :content-flex="false" :merge-props="false">
                <a-row :gutter="24">
                  <a-col :span="2" />
                  <a-col :span="22">
                    <a-button type="primary" html-type="submit" long>立即执行</a-button>
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item v-if="batchList.length > 0" :content-flex="false" :merge-props="false">
                <a-row :gutter="24">
                  <a-col :span="2" />
                  <a-col :span="22">
                    <a-row style="margin-bottom: 10px">
                      <a-col :span="6"> 卡板数量:{{ batchList.length }} </a-col>
                      <a-col :span="6"> 成功数量:{{ zong.success }} </a-col>
                      <a-col :span="6"> 失败数量{{ zong.error }} </a-col>
                    </a-row>
                  </a-col>
                  <a-col :span="2" />
                  <a-col :span="22" style="margin-bottom: 10px">
                    <a-progress
                      :show-text="false"
                      size="large"
                      :percent="(zong.success + zong.error) / batchList.length"
                    />
                  </a-col>
                  <a-col :span="2" />
                  <a-col :span="22">
                    <div
                      style="
                        width: 100%;
                        height: 100px;
                        background-color: #f2f3f5;
                        overflow-y: scroll;
                        padding: 0 15px;
                      "
                    >
                      <div v-for="item in errorList" :key="item">
                        {{ item }}
                      </div>
                    </div>
                  </a-col>
                </a-row>
              </a-form-item>
            </a-form>
          </a-tab-pane>
          <a-tab-pane key="5" title="充值套餐">
            <a-form
              class="huakaClass"
              ref="batchRef4"
              :model="batchForm"
              :auto-label-width="true"
              @submit="batchRefFn4"
            >
              <a-form-item label="操作方式" :content-flex="false" :merge-props="false">
                <a-row :gutter="24">
                  <a-col :span="2">
                    <a-radio
                      @click="cardMealFna"
                      style="margin-top: 10px"
                      v-model="batchChecked"
                      value="seach"
                    />
                  </a-col>
                  <a-col :span="22">
                    <div style="text-align: left; margin-top: 5px">当前搜索条件下 </div>
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item :content-flex="false" :merge-props="false">
                <a-row :gutter="24">
                  <a-col :span="2">
                    <a-radio style="margin-top: 10px" v-model="batchChecked" value="orderly" />
                  </a-col>
                  <a-col :span="10">
                    <a-form-item
                      hide-asterisk
                      field="addCard"
                      validate-trigger="input"
                      :rules="[
                        {
                          required: batchChecked == 'orderly' ? true : false,
                          message: '请输入开始卡号',
                        },
                      ]"
                      no-style
                      asterisk-position="end"
                    >
                      <a-input
                        v-model="batchForm.addCard"
                        @blur="cardMealFn"
                        :disabled="batchChecked == 'orderly' ? false : true"
                        placeholder="请输入开始卡号"
                        allow-clear
                      />
                    </a-form-item>
                  </a-col>
                  <a-col :span="2">
                    <div style="height: 1px; background-color: #000; margin-top: 16px"></div>
                  </a-col>
                  <a-col :span="10">
                    <a-form-item
                      field="endCard"
                      hide-asterisk
                      validate-trigger="input"
                      :rules="[
                        {
                          required: batchChecked == 'orderly' ? true : false,
                          message: '请输入结束卡号',
                        },
                      ]"
                      no-style
                      asterisk-position="end"
                    >
                      <a-input
                        v-model="batchForm.endCard"
                        :disabled="batchChecked == 'orderly' ? false : true"
                        placeholder="请输入结束卡号"
                        allow-clear
                      />
                    </a-form-item>
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item
                field="cardMultiline"
                :content-flex="false"
                hide-asterisk
                :merge-props="false"
                :rules="[
                  {
                    required: batchChecked == 'disOrder' ? true : false,
                    message: '卡号不能为空',
                  },
                ]"
                :validate-trigger="['change', 'input']"
                asterisk-position="end"
              >
                <a-row :gutter="24">
                  <a-col :span="2">
                    <a-radio style="margin-top: 10px" v-model="batchChecked" value="disOrder" />
                  </a-col>
                  <a-col :span="22">
                    <a-textarea
                      :auto-size="{
                        minRows: 10,
                      }"
                      @blur="cardMealFns"
                      v-model="batchForm.cardMultiline"
                      :disabled="batchChecked == 'disOrder' ? false : true"
                      placeholder="请输入卡号，一行一个"
                      allow-clear
                    />
                  </a-col>
                </a-row>
              </a-form-item>
              <!-- <a-form-item
                field="time"
                label="时间间隔"
                hide-asterisk
                :content-flex="false"
                :merge-props="false"
                :rules="[{ required: true, message: '时间间隔不能为空' }]"
                :validate-trigger="['change', 'input']"
                asterisk-position="end"
              >
                <a-row :gutter="24">
                  <a-col :span="2" />
                  <a-col :span="22">
                    <a-input-number
                      v-model="batchForm.time"
                      placeholder="请输入时间间隔"
                      allow-clear
                      hide-button
                      :min="3"
                    >
                      <template #suffix> 秒 </template>
                    </a-input-number>
                  </a-col>
                </a-row>
              </a-form-item> -->
              <a-form-item label="充值套餐" :content-flex="false" :merge-props="false">
                <a-row :gutter="24">
                  <a-col :span="2">
                    <!-- <a-radio style="margin-top: 10px" v-model="batchChecked" value="orderly" /> -->
                  </a-col>
                  <a-col :span="22">
                    <a-form-item
                      hide-asterisk
                      field="setMealId"
                      validate-trigger="input"
                      :rules="[
                        {
                          required: checked1 == 'disOrder' ? false : true,
                          message: '请选择充值套餐',
                        },
                      ]"
                      no-style
                      asterisk-position="end"
                    >
                      <a-select
                        v-model="batchForm.setMealId"
                        placeholder="请选择充值套餐"
                        @change="changeMeals"
                        allow-clear
                      >
                        <a-option v-for="item in batchMealList" :key="item.id" :value="item.id">{{
                          item.name
                        }}</a-option>
                      </a-select>
                    </a-form-item>
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item label="订单时间" :content-flex="false" :merge-props="false">
                <a-row :gutter="24">
                  <a-col :span="2" />
                  <a-col :span="22">
                    <a-form-item
                      field="next"
                      hide-asterisk
                      validate-trigger="input"
                      :rules="[
                        {
                          required: true,
                          message: '请选择充值类型',
                        },
                      ]"
                      no-style
                      asterisk-position="end"
                    >
                      <a-radio-group class="radio-bcg" :disabled="lis" v-model="batchForm.next">
                        <a-radio :value="0">
                          <template #radio="{ checked }">
                            <div
                              style="display: flex"
                              :class="{ 'custom-radio-card-checked': checked }"
                            >
                              <div className="custom-radio-card-mask">
                                <div className="custom-radio-card-mask-dot"></div> </div
                              ><div className="custom-radio-card-title">本月</div>
                            </div>
                          </template>
                        </a-radio>
                        <a-radio :value="1">
                          <template #radio="{ checked }">
                            <div
                              style="display: flex"
                              :class="{ 'custom-radio-card-checked': checked }"
                            >
                              <div className="custom-radio-card-mask">
                                <div className="custom-radio-card-mask-dot"></div> </div
                              ><div className="custom-radio-card-title">次月</div>
                            </div>
                          </template>
                        </a-radio>
                      </a-radio-group>
                    </a-form-item>
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item
                field="upstream"
                label="提交上游"
                hide-asterisk
                :content-flex="false"
                :merge-props="false"
              >
                <a-row :gutter="24">
                  <a-col :span="2" />
                  <a-col :span="22">
                    <a-radio-group class="radio-bcg" v-model="batchForm.upstream">
                      <a-radio :value="1">
                        <template #radio="{ checked }">
                          <div
                            style="display: flex"
                            :class="{ 'custom-radio-card-checked': checked }"
                          >
                            <div className="custom-radio-card-mask">
                              <div className="custom-radio-card-mask-dot"></div> </div
                            ><div className="custom-radio-card-title">提交</div>
                          </div>
                        </template>
                      </a-radio>
                      <a-radio :value="0">
                        <template #radio="{ checked }">
                          <div
                            style="display: flex"
                            :class="{ 'custom-radio-card-checked': checked }"
                          >
                            <div className="custom-radio-card-mask">
                              <div className="custom-radio-card-mask-dot"></div> </div
                            ><div className="custom-radio-card-title">不提交</div>
                          </div>
                        </template>
                      </a-radio>
                    </a-radio-group>
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item
                field="remarks"
                label="充值备注"
                asterisk-position="end"
                :content-flex="false"
                :merge-props="false"
              >
                <a-row :gutter="24">
                  <a-col :span="2" />
                  <a-col :span="22">
                    <a-input v-model="batchForm.remarks" placeholder="请输入充值备注" allow-clear />
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item :content-flex="false" :merge-props="false">
                <a-row :gutter="24">
                  <a-col :span="2" />
                  <a-col :span="22">
                    <a-button type="primary" html-type="submit" long>立即执行</a-button>
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item v-if="batchList.length > 0" :content-flex="false" :merge-props="false">
                <a-row :gutter="24">
                  <a-col :span="2" />
                  <a-col :span="22">
                    <a-row style="margin-bottom: 10px">
                      <a-col :span="6"> 卡板数量:{{ batchList.length }} </a-col>
                      <a-col :span="6"> 成功数量:{{ zong.success }} </a-col>
                      <a-col :span="6"> 失败数量{{ zong.error }} </a-col>
                    </a-row>
                  </a-col>
                  <a-col :span="2" />
                  <a-col :span="22" style="margin-bottom: 10px">
                    <a-progress
                      :show-text="false"
                      size="large"
                      :percent="(zong.success + zong.error) / batchList.length"
                    />
                  </a-col>
                  <a-col :span="2" />
                  <a-col :span="22">
                    <div
                      style="
                        width: 100%;
                        height: 100px;
                        background-color: #f2f3f5;
                        overflow-y: scroll;
                        padding: 0 15px;
                      "
                    >
                      <div v-for="item in errorList" :key="item">
                        {{ item }}
                      </div>
                    </div>
                  </a-col>
                </a-row>
              </a-form-item>
            </a-form>
          </a-tab-pane>
          <a-tab-pane key="4" title="余额操作">
            <a-form
              class="huakaClass"
              ref="batchRef3"
              :model="batchForm"
              :auto-label-width="true"
              @submit="batchRefFn3"
            >
              <a-form-item label="操作方式" :content-flex="false" :merge-props="false">
                <a-row :gutter="24">
                  <a-col :span="2">
                    <a-radio style="margin-top: 10px" v-model="batchChecked" value="seach" />
                  </a-col>
                  <a-col :span="22">
                    <div style="text-align: left; margin-top: 5px">当前搜索条件下 </div>
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item :content-flex="false" :merge-props="false">
                <a-row :gutter="24">
                  <a-col :span="2">
                    <a-radio style="margin-top: 10px" v-model="batchChecked" value="orderly" />
                  </a-col>
                  <a-col :span="10">
                    <a-form-item
                      hide-asterisk
                      field="addCard"
                      validate-trigger="input"
                      :rules="[
                        {
                          required: batchChecked == 'orderly' ? true : false,
                          message: '请输入开始卡号',
                        },
                      ]"
                      no-style
                      asterisk-position="end"
                    >
                      <a-input
                        v-model="batchForm.addCard"
                        :disabled="batchChecked == 'orderly' ? false : true"
                        placeholder="请输入开始卡号"
                        allow-clear
                      />
                    </a-form-item>
                  </a-col>
                  <a-col :span="2">
                    <div style="height: 1px; background-color: #000; margin-top: 16px"></div>
                  </a-col>
                  <a-col :span="10">
                    <a-form-item
                      field="endCard"
                      hide-asterisk
                      validate-trigger="input"
                      :rules="[
                        {
                          required: batchChecked == 'orderly' ? true : false,
                          message: '请输入结束卡号',
                        },
                      ]"
                      no-style
                      asterisk-position="end"
                    >
                      <a-input
                        v-model="batchForm.endCard"
                        :disabled="batchChecked == 'orderly' ? false : true"
                        placeholder="请输入结束卡号"
                        allow-clear
                      />
                    </a-form-item>
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item
                field="cardMultiline"
                :content-flex="false"
                hide-asterisk
                :merge-props="false"
                :rules="[
                  {
                    required: batchChecked == 'disOrder' ? true : false,
                    message: '卡号不能为空',
                  },
                ]"
                :validate-trigger="['change', 'input']"
                asterisk-position="end"
              >
                <a-row :gutter="24">
                  <a-col :span="2">
                    <a-radio style="margin-top: 10px" v-model="batchChecked" value="disOrder" />
                  </a-col>
                  <a-col :span="22">
                    <a-textarea
                      :auto-size="{
                        minRows: 10,
                      }"
                      v-model="batchForm.cardMultiline"
                      :disabled="batchChecked == 'disOrder' ? false : true"
                      placeholder="请输入卡号，一行一个"
                      allow-clear
                    />
                  </a-col>
                </a-row>
              </a-form-item>

              <a-form-item
                field="remarks"
                label="操作类型"
                hide-asterisk
                :content-flex="false"
                :merge-props="false"
              >
                <a-row :gutter="24">
                  <a-col :span="2" />
                  <a-col :span="22">
                    <a-radio-group class="radio-bcg" v-model="batchForm.type">
                      <a-radio :value="0">
                        <template #radio="{ checked }">
                          <div
                            style="display: flex"
                            :class="{ 'custom-radio-card-checked': checked }"
                          >
                            <div className="custom-radio-card-mask">
                              <div className="custom-radio-card-mask-dot"></div> </div
                            ><div className="custom-radio-card-title">加款</div>
                          </div>
                        </template>
                      </a-radio>
                      <a-radio :value="1">
                        <template #radio="{ checked }">
                          <div
                            style="display: flex"
                            :class="{ 'custom-radio-card-checked': checked }"
                          >
                            <div className="custom-radio-card-mask">
                              <div className="custom-radio-card-mask-dot"></div> </div
                            ><div className="custom-radio-card-title">扣款</div>
                          </div>
                        </template>
                      </a-radio>
                      <a-radio :value="2">
                        <template #radio="{ checked }">
                          <div
                            style="display: flex"
                            :class="{ 'custom-radio-card-checked': checked }"
                          >
                            <div className="custom-radio-card-mask">
                              <div className="custom-radio-card-mask-dot"></div> </div
                            ><div className="custom-radio-card-title">最终金额</div>
                          </div>
                        </template>
                      </a-radio>
                    </a-radio-group>
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item
                field="balance"
                label="操作金额"
                hide-asterisk
                :content-flex="false"
                :merge-props="false"
                :rules="[{ required: true, message: '操作金额不能为空' }]"
                :validate-trigger="['change', 'input']"
                asterisk-position="end"
              >
                <a-row :gutter="24">
                  <a-col :span="2" />
                  <a-col :span="22">
                    <a-input-number
                      v-model="batchForm.balance"
                      placeholder="请输入操作金额"
                      allow-clear
                      hide-button
                      :min="1"
                    />
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item :content-flex="false" :merge-props="false">
                <a-row :gutter="24">
                  <a-col :span="2" />
                  <a-col :span="22">
                    <a-button type="primary" html-type="submit" :loading="loadings" long
                      >立即执行</a-button
                    >
                  </a-col>
                </a-row>
              </a-form-item>
            </a-form>
          </a-tab-pane>
          <a-tab-pane key="6" title="卡板备注">
            <a-form class="huakaClass" ref="remarkRef" :model="remarkForm" :auto-label-width="true">
              <a-form-item label="操作方式" :content-flex="false" :merge-props="false">
                <a-row :gutter="24">
                  <a-col :span="2">
                    <a-radio
                      style="margin-top: 10px; margin-bottom: 10px"
                      v-model="remarkC"
                      value="seach"
                    />
                  </a-col>
                  <a-col :span="22">
                    <div style="text-align: left; margin-top: 5px">当前搜索条件下 </div>
                  </a-col>
                  <a-col :span="2">
                    <a-radio style="margin-top: 10px" v-model="remarkC" value="orderly" />
                  </a-col>
                  <a-col :span="10">
                    <a-form-item
                      hide-asterisk
                      field="addCard"
                      validate-trigger="input"
                      :rules="[
                        {
                          required: remarkC == 'orderly' ? true : false,
                          message: '请输入开始卡号',
                        },
                      ]"
                      no-style
                      asterisk-position="end"
                    >
                      <a-input
                        v-model="remarkForm.addCard"
                        :disabled="remarkC == 'orderly' ? false : true"
                        placeholder="请输入开始卡号"
                        allow-clear
                      />
                    </a-form-item>
                  </a-col>
                  <a-col :span="2">
                    <div style="height: 1px; background-color: #000; margin-top: 16px"></div>
                  </a-col>
                  <a-col :span="10">
                    <a-form-item
                      field="endCard"
                      hide-asterisk
                      validate-trigger="input"
                      :rules="[
                        {
                          required: remarkC == 'orderly' ? true : false,
                          message: '请输入结束卡号',
                        },
                      ]"
                      no-style
                      asterisk-position="end"
                    >
                      <a-input
                        v-model="remarkForm.endCard"
                        :disabled="remarkC == 'orderly' ? false : true"
                        placeholder="请输入结束卡号"
                        allow-clear
                      />
                    </a-form-item>
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item
                field="cardMultiline"
                :content-flex="false"
                hide-asterisk
                :merge-props="false"
                :rules="[
                  { required: remarkC == 'disOrder' ? true : false, message: '卡号不能为空' },
                ]"
                :validate-trigger="['change', 'input']"
                asterisk-position="end"
              >
                <a-row :gutter="24">
                  <a-col :span="2">
                    <a-radio style="margin-top: 10px" v-model="remarkC" value="disOrder" />
                  </a-col>
                  <a-col :span="22">
                    <a-textarea
                      :auto-size="{
                        minRows: 10,
                      }"
                      v-model="remarkForm.cardMultiline"
                      :disabled="remarkC == 'disOrder' ? false : true"
                      placeholder="请输入卡号，一行一个"
                      allow-clear
                    />
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item
                field="remarks"
                label="卡板备注"
                hide-asterisk
                :content-flex="false"
                :merge-props="false"
                asterisk-position="end"
              >
                <a-row :gutter="24">
                  <a-col :span="2" />

                  <a-col :span="22">
                    <a-input v-model="remarkForm.remarks" placeholder="请输入备注" allow-clear />
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item
                field="cover"
                label="备注类型"
                hide-asterisk
                :content-flex="false"
                :merge-props="false"
                :rules="[{ required: true, message: '备注类型不能为空' }]"
                :validate-trigger="['change', 'input']"
                asterisk-position="end"
              >
                <a-row :gutter="24">
                  <a-col :span="2" />

                  <a-col :span="22">
                    <a-select v-model="remarkForm.cover" allow-clear placeholder="请选择备注类型">
                      <a-option :value="true">覆盖备注</a-option>
                      <a-option :value="false">不覆盖</a-option>
                    </a-select>
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item :content-flex="false" :merge-props="false">
                <a-row :gutter="24">
                  <a-col :span="2" />
                  <a-col :span="22">
                    <a-button
                      type="primary"
                      :loading="loadingRemark"
                      @click="handleBeforeOkRemark"
                      long
                      >立即执行</a-button
                    >
                  </a-col>
                </a-row>
              </a-form-item>
            </a-form>
          </a-tab-pane>
          <a-tab-pane key="7" title="一卡一码">
            <a-form
              class="huakaClass"
              ref="oneCodeRef"
              :model="oneCodeForm"
              :auto-label-width="true"
            >
              <a-form-item label="操作方式" :content-flex="false" :merge-props="false">
                <a-row :gutter="24">
                  <a-col :span="2">
                    <a-radio
                      style="margin-top: 10px; margin-bottom: 20px"
                      v-model="checked1"
                      value="seach"
                    />
                  </a-col>
                  <a-col :span="22">
                    <div style="text-align: left; margin-top: 5px; margin-bottom: 20px"
                      >当前搜索条件下
                    </div>
                  </a-col>
                  <a-col :span="2">
                    <a-radio style="margin-top: 10px" v-model="checked1" value="orderly" />
                  </a-col>
                  <a-col :span="10">
                    <a-form-item
                      hide-asterisk
                      field="addCard"
                      validate-trigger="input"
                      :rules="[
                        {
                          required: checked1 == 'orderly' ? true : false,
                          message: '请输入开始卡号',
                        },
                      ]"
                      no-style
                      asterisk-position="end"
                    >
                      <a-input
                        v-model="oneCodeForm.addCard"
                        :disabled="checked1 == 'orderly' ? false : true"
                        placeholder="请输入开始卡号"
                        allow-clear
                      />
                    </a-form-item>
                  </a-col>
                  <a-col :span="2">
                    <div style="height: 1px; background-color: #000; margin-top: 16px"></div>
                  </a-col>
                  <a-col :span="10">
                    <a-form-item
                      field="endCard"
                      hide-asterisk
                      validate-trigger="input"
                      :rules="[
                        {
                          required: checked1 == 'orderly' ? true : false,
                          message: '请输入结束卡号',
                        },
                      ]"
                      no-style
                      asterisk-position="end"
                    >
                      <a-input
                        v-model="oneCodeForm.endCard"
                        :disabled="checked1 == 'orderly' ? false : true"
                        placeholder="请输入结束卡号"
                        allow-clear
                      />
                    </a-form-item>
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item
                field="cardMultiline"
                :content-flex="false"
                hide-asterisk
                :merge-props="false"
                :rules="[
                  { required: checked1 == 'disOrder' ? true : false, message: '卡号不能为空' },
                ]"
                :validate-trigger="['change', 'input']"
                asterisk-position="end"
              >
                <a-row :gutter="24">
                  <a-col :span="2">
                    <a-radio style="margin-top: 10px" v-model="checked1" value="disOrder" />
                  </a-col>
                  <a-col :span="22">
                    <a-textarea
                      :auto-size="{
                        minRows: 10,
                      }"
                      v-model="oneCodeForm.cardMultiline"
                      :disabled="checked1 == 'disOrder' ? false : true"
                      placeholder="请输入卡号，一行一个"
                      allow-clear
                    />
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item
                field="planId"
                label="操作类型"
                hide-asterisk
                :content-flex="false"
                :merge-props="false"
                :rules="[{ required: true, message: '请选择方案' }]"
                :validate-trigger="['change', 'input']"
                asterisk-position="end"
              >
                <a-row :gutter="24">
                  <a-col :span="2" />
                  <a-col :span="22">
                    <a-select
                      v-model="oneCodeForm.planId"
                      allow-search
                      placeholder="请选择一卡一码方案"
                      allow-clear
                    >
                      <a-option v-for="item in oneCodeList" :key="item.id" :value="item.id">{{
                        item.name
                      }}</a-option>
                    </a-select>
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item :content-flex="false" :merge-props="false">
                <a-row :gutter="24">
                  <a-col :span="2" />
                  <a-col :span="22">
                    <a-button type="primary" :loading="loadings" @click="oneCodeJian" long
                      >立即执行</a-button
                    >
                  </a-col>
                </a-row>
              </a-form-item>
            </a-form>
          </a-tab-pane>
          <a-tab-pane key="11" title="充值会员">
            <a-form
              class="huakaClass"
              ref="batchRef5"
              :model="batchForm"
              :auto-label-width="true"
              @submit="cardVip"
            >
              <a-form-item label="操作方式" :content-flex="false" :merge-props="false">
                <a-row :gutter="24">
                  <a-col :span="2">
                    <a-radio
                      @click="cardMealFna"
                      style="margin-top: 10px"
                      v-model="batchChecked"
                      value="seach"
                    />
                  </a-col>
                  <a-col :span="22">
                    <div style="text-align: left; margin-top: 5px">当前搜索条件下 </div>
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item :content-flex="false" :merge-props="false">
                <a-row :gutter="24">
                  <a-col :span="2">
                    <a-radio style="margin-top: 10px" v-model="batchChecked" value="orderly" />
                  </a-col>
                  <a-col :span="10">
                    <a-form-item
                      hide-asterisk
                      field="addCard"
                      validate-trigger="input"
                      :rules="[
                        {
                          required: batchChecked == 'orderly' ? true : false,
                          message: '请输入开始卡号',
                        },
                      ]"
                      no-style
                      asterisk-position="end"
                    >
                      <a-input
                        v-model="batchForm.addCard"
                        @blur="cardMealFn"
                        :disabled="batchChecked == 'orderly' ? false : true"
                        placeholder="请输入开始卡号"
                        allow-clear
                      />
                    </a-form-item>
                  </a-col>
                  <a-col :span="2">
                    <div style="height: 1px; background-color: #000; margin-top: 16px"></div>
                  </a-col>
                  <a-col :span="10">
                    <a-form-item
                      field="endCard"
                      hide-asterisk
                      validate-trigger="input"
                      :rules="[
                        {
                          required: batchChecked == 'orderly' ? true : false,
                          message: '请输入结束卡号',
                        },
                      ]"
                      no-style
                      asterisk-position="end"
                    >
                      <a-input
                        v-model="batchForm.endCard"
                        :disabled="batchChecked == 'orderly' ? false : true"
                        placeholder="请输入结束卡号"
                        allow-clear
                      />
                    </a-form-item>
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item
                field="cardMultiline"
                :content-flex="false"
                hide-asterisk
                :merge-props="false"
                :rules="[
                  {
                    required: batchChecked == 'disOrder' ? true : false,
                    message: '卡号不能为空',
                  },
                ]"
                :validate-trigger="['change', 'input']"
                asterisk-position="end"
              >
                <a-row :gutter="24">
                  <a-col :span="2">
                    <a-radio style="margin-top: 10px" v-model="batchChecked" value="disOrder" />
                  </a-col>
                  <a-col :span="22">
                    <a-textarea
                      :auto-size="{
                        minRows: 10,
                      }"
                      @blur="cardMealFns"
                      v-model="batchForm.cardMultiline"
                      :disabled="batchChecked == 'disOrder' ? false : true"
                      placeholder="请输入卡号，一行一个"
                      allow-clear
                    />
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item label="极速会员" :content-flex="false" :merge-props="false">
                <a-row :gutter="24">
                  <a-col :span="2">
                    <!-- <a-radio style="margin-top: 10px" v-model="batchChecked" value="orderly" /> -->
                  </a-col>
                  <a-col :span="22">
                    <a-form-item
                      hide-asterisk
                      field="setMealId"
                      validate-trigger="input"
                      :rules="[
                        {
                          required: checked1 == 'disOrder' ? false : true,
                          message: '请选择极速会员',
                        },
                      ]"
                      no-style
                      asterisk-position="end"
                    >
                      <a-select
                        v-model="batchForm.setMealId"
                        placeholder="请选择极速会员"
                        allow-clear
                      >
                        <a-option v-for="item in batchMealList" :key="item.id" :value="item.id">{{
                          item.vipName
                        }}</a-option>
                      </a-select>
                    </a-form-item>
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item :content-flex="false" :merge-props="false">
                <a-row :gutter="24">
                  <a-col :span="2" />
                  <a-col :span="22">
                    <a-button type="primary" html-type="submit" long>立即执行</a-button>
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item v-if="batchList.length > 0" :content-flex="false" :merge-props="false">
                <a-row :gutter="24">
                  <a-col :span="2" />
                  <a-col :span="22">
                    <a-row style="margin-bottom: 10px">
                      <a-col :span="6"> 卡板数量:{{ batchList.length }} </a-col>
                      <a-col :span="6"> 成功数量:{{ zong.success }} </a-col>
                      <a-col :span="6"> 失败数量{{ zong.error }} </a-col>
                    </a-row>
                  </a-col>
                  <a-col :span="2" />
                  <a-col :span="22" style="margin-bottom: 10px">
                    <a-progress
                      :show-text="false"
                      size="large"
                      :percent="(zong.success + zong.error) / batchList.length"
                    />
                  </a-col>
                  <a-col :span="2" />
                  <a-col :span="22">
                    <div
                      style="
                        width: 100%;
                        height: 100px;
                        background-color: #f2f3f5;
                        overflow-y: scroll;
                        padding: 0 15px;
                      "
                    >
                      <div v-for="item in errorList" :key="item">
                        {{ item }}
                      </div>
                    </div>
                  </a-col>
                </a-row>
              </a-form-item>
            </a-form>
          </a-tab-pane>
          <a-tab-pane key="9" title="清除数据">
            <div style="border-radius: 5px; background: #f2f3f5">
              <div style="padding: 10px 15px; border-bottom: 1px solid #e5e6eb">
                清除数据注意事项
              </div>
              <div style="padding: 10px 15px">
                <div>1：选择套餐订单清空时，卡上的天用量也会被删除</div>
                <div>2：选择余额订单清空时，卡上的余额明细，卡余额都会被清除</div>
              </div>
            </div>
            <a-form
              style="margin-top: 10px"
              class="huakaClass"
              ref="batchRef8"
              :model="batchForm"
              :auto-label-width="true"
              @submit="batchRefFn8"
            >
              <a-form-item label="操作方式" :content-flex="false" :merge-props="false">
                <a-row :gutter="24">
                  <a-col :span="2">
                    <a-radio style="margin-top: 10px" v-model="batchChecked" value="seach" />
                  </a-col>
                  <a-col :span="22">
                    <div style="text-align: left; margin-top: 5px">当前搜索条件下 </div>
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item :content-flex="false" :merge-props="false">
                <a-row :gutter="24">
                  <a-col :span="2">
                    <a-radio style="margin-top: 10px" v-model="batchChecked" value="orderly" />
                  </a-col>
                  <a-col :span="10">
                    <a-form-item
                      hide-asterisk
                      field="addCard"
                      validate-trigger="input"
                      :rules="[
                        {
                          required: batchChecked == 'orderly' ? true : false,
                          message: '请输入开始卡号',
                        },
                      ]"
                      no-style
                      asterisk-position="end"
                    >
                      <a-input
                        v-model="batchForm.addCard"
                        :disabled="batchChecked == 'orderly' ? false : true"
                        placeholder="请输入开始卡号"
                        allow-clear
                      />
                    </a-form-item>
                  </a-col>
                  <a-col :span="2">
                    <div style="height: 1px; background-color: #000; margin-top: 16px"></div>
                  </a-col>
                  <a-col :span="10">
                    <a-form-item
                      field="endCard"
                      hide-asterisk
                      validate-trigger="input"
                      :rules="[
                        {
                          required: batchChecked == 'orderly' ? true : false,
                          message: '请输入结束卡号',
                        },
                      ]"
                      no-style
                      asterisk-position="end"
                    >
                      <a-input
                        v-model="batchForm.endCard"
                        :disabled="batchChecked == 'orderly' ? false : true"
                        placeholder="请输入结束卡号"
                        allow-clear
                      />
                    </a-form-item>
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item
                field="cardMultiline"
                :content-flex="false"
                hide-asterisk
                :merge-props="false"
                :rules="[
                  {
                    required: batchChecked == 'disOrder' ? true : false,
                    message: '卡号不能为空',
                  },
                ]"
                :validate-trigger="['change', 'input']"
                asterisk-position="end"
              >
                <a-row :gutter="24">
                  <a-col :span="2">
                    <a-radio style="margin-top: 10px" v-model="batchChecked" value="disOrder" />
                  </a-col>
                  <a-col :span="22">
                    <a-textarea
                      :auto-size="{
                        minRows: 10,
                      }"
                      v-model="batchForm.cardMultiline"
                      :disabled="batchChecked == 'disOrder' ? false : true"
                      placeholder="请输入卡号，一行一个"
                      allow-clear
                    />
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item label="清除数据" :content-flex="false" :merge-props="false">
                <a-row :gutter="24">
                  <a-col :span="2">
                    <!-- <a-radio style="margin-top: 10px" v-model="batchChecked" value="orderly" /> -->
                  </a-col>
                  <a-col :span="22">
                    <a-form-item
                      :content-flex="false"
                      hide-label
                      hide-asterisk
                      :merge-props="false"
                    >
                      <div
                        style="
                          padding: 10px 15px;
                          border-radius: 5px;
                          background: #f2f3f5;
                          display: flex;
                          flex-wrap: wrap;
                          justify-content: space-between;
                        "
                      >
                        <a-checkbox v-model="timeForm.pay">套餐时间</a-checkbox>
                        <a-checkbox v-model="timeForm.balance">余额时间</a-checkbox>
                        <a-checkbox v-model="timeForm.coupon">券包时间</a-checkbox>
                        <a-checkbox v-model="timeForm.vip">会员时间</a-checkbox>
                        <a-checkbox v-model="timeForm.cancellation">注销时间</a-checkbox>
                        <a-checkbox v-model="timeForm.change">换卡时间</a-checkbox>
                        <a-checkbox v-model="timeForm.transfer">转移时间</a-checkbox>
                        <a-checkbox v-model="timeForm.expire">到期时间</a-checkbox>
                        <a-checkbox v-model="timeForm.order">套餐订单</a-checkbox>
                        <a-checkbox v-model="timeForm.bill">余额订单</a-checkbox>
                      </div>
                    </a-form-item>
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item :content-flex="false" :merge-props="false">
                <a-row :gutter="24">
                  <a-col :span="2" />
                  <a-col :span="22">
                    <a-button type="primary" html-type="submit" long>立即执行</a-button>
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item v-if="batchList.length > 0" :content-flex="false" :merge-props="false">
                <a-row :gutter="24">
                  <a-col :span="2" />
                  <a-col :span="22">
                    <a-row style="margin-bottom: 10px">
                      <a-col :span="6"> 卡板数量:{{ batchList.length }} </a-col>
                      <a-col :span="6"> 成功数量:{{ zong.success }} </a-col>
                      <a-col :span="6"> 失败数量{{ zong.error }} </a-col>
                    </a-row>
                  </a-col>
                  <a-col :span="2" />
                  <a-col :span="22" style="margin-bottom: 10px">
                    <a-progress
                      :show-text="false"
                      size="large"
                      :percent="(zong.success + zong.error) / batchList.length"
                    />
                  </a-col>
                  <a-col :span="2" />
                  <a-col :span="22">
                    <div
                      style="
                        width: 100%;
                        height: 100px;
                        background-color: #f2f3f5;
                        overflow-y: scroll;
                        padding: 0 15px;
                      "
                    >
                      <div v-for="item in errorList" :key="item">
                        {{ item }}
                      </div>
                    </div>
                  </a-col>
                </a-row>
              </a-form-item>
            </a-form>
          </a-tab-pane>
          <a-tab-pane key="8" title="充值券包">
            <a-form
              class="huakaClass"
              ref="batchRef7"
              :model="batchForm"
              :auto-label-width="true"
              @submit="batchRefFn7"
            >
              <a-form-item label="操作方式" :content-flex="false" :merge-props="false">
                <a-row :gutter="24">
                  <a-col :span="2">
                    <a-radio
                      @click="cardMealFna"
                      style="margin-top: 10px"
                      v-model="batchChecked"
                      value="seach"
                    />
                  </a-col>
                  <a-col :span="22">
                    <div style="text-align: left; margin-top: 5px">当前搜索条件下 </div>
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item :content-flex="false" :merge-props="false">
                <a-row :gutter="24">
                  <a-col :span="2">
                    <a-radio style="margin-top: 10px" v-model="batchChecked" value="orderly" />
                  </a-col>
                  <a-col :span="10">
                    <a-form-item
                      hide-asterisk
                      field="addCard"
                      validate-trigger="input"
                      :rules="[
                        {
                          required: batchChecked == 'orderly' ? true : false,
                          message: '请输入开始卡号',
                        },
                      ]"
                      no-style
                      asterisk-position="end"
                    >
                      <a-input
                        v-model="batchForm.addCard"
                        @blur="cardMealFn"
                        :disabled="batchChecked == 'orderly' ? false : true"
                        placeholder="请输入开始卡号"
                        allow-clear
                      />
                    </a-form-item>
                  </a-col>
                  <a-col :span="2">
                    <div style="height: 1px; background-color: #000; margin-top: 16px"></div>
                  </a-col>
                  <a-col :span="10">
                    <a-form-item
                      field="endCard"
                      hide-asterisk
                      validate-trigger="input"
                      :rules="[
                        {
                          required: batchChecked == 'orderly' ? true : false,
                          message: '请输入结束卡号',
                        },
                      ]"
                      no-style
                      asterisk-position="end"
                    >
                      <a-input
                        v-model="batchForm.endCard"
                        :disabled="batchChecked == 'orderly' ? false : true"
                        placeholder="请输入结束卡号"
                        allow-clear
                      />
                    </a-form-item>
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item
                field="cardMultiline"
                :content-flex="false"
                hide-asterisk
                :merge-props="false"
                :rules="[
                  {
                    required: batchChecked == 'disOrder' ? true : false,
                    message: '卡号不能为空',
                  },
                ]"
                :validate-trigger="['change', 'input']"
                asterisk-position="end"
              >
                <a-row :gutter="24">
                  <a-col :span="2">
                    <a-radio style="margin-top: 10px" v-model="batchChecked" value="disOrder" />
                  </a-col>
                  <a-col :span="22">
                    <a-textarea
                      :auto-size="{
                        minRows: 10,
                      }"
                      @blur="cardMealFns"
                      v-model="batchForm.cardMultiline"
                      :disabled="batchChecked == 'disOrder' ? false : true"
                      placeholder="请输入卡号，一行一个"
                      allow-clear
                    />
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item label="优惠券" :content-flex="false" :merge-props="false">
                <a-row :gutter="24">
                  <a-col :span="2">
                    <!-- <a-radio style="margin-top: 10px" v-model="batchChecked" value="orderly" /> -->
                  </a-col>
                  <a-col :span="22">
                    <a-form-item
                      hide-asterisk
                      field="setMealId"
                      validate-trigger="input"
                      :rules="[
                        {
                          required: checked1 == 'disOrder' ? false : true,
                          message: '请选择优惠券',
                        },
                      ]"
                      no-style
                      asterisk-position="end"
                    >
                      <a-select
                        v-model="batchForm.setMealId"
                        placeholder="请选择优惠券"
                        @change="changeMeals"
                        allow-clear
                      >
                        <a-option v-for="item in batchMealList" :key="item.id" :value="item.id">{{
                          item.couponName
                        }}</a-option>
                      </a-select>
                    </a-form-item>
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item :content-flex="false" :merge-props="false">
                <a-row :gutter="24">
                  <a-col :span="2" />
                  <a-col :span="22">
                    <a-button type="primary" html-type="submit" long>立即执行</a-button>
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item v-if="batchList.length > 0" :content-flex="false" :merge-props="false">
                <a-row :gutter="24">
                  <a-col :span="2" />
                  <a-col :span="22">
                    <a-row style="margin-bottom: 10px">
                      <a-col :span="6"> 卡板数量:{{ batchList.length }} </a-col>
                      <a-col :span="6"> 成功数量:{{ zong.success }} </a-col>
                      <a-col :span="6"> 失败数量{{ zong.error }} </a-col>
                    </a-row>
                  </a-col>
                  <a-col :span="2" />
                  <a-col :span="22" style="margin-bottom: 10px">
                    <a-progress
                      :show-text="false"
                      size="large"
                      :percent="(zong.success + zong.error) / batchList.length"
                    />
                  </a-col>
                  <a-col :span="2" />
                  <a-col :span="22">
                    <div
                      style="
                        width: 100%;
                        height: 100px;
                        background-color: #f2f3f5;
                        overflow-y: scroll;
                        padding: 0 15px;
                      "
                    >
                      <div v-for="item in errorList" :key="item">
                        {{ item }}
                      </div>
                    </div>
                  </a-col>
                </a-row>
              </a-form-item>
            </a-form>
          </a-tab-pane>
        </a-tabs>
      </div>
      <template #footer>
        <a-space />
      </template>
    </a-modal>
    <!-- 提示弹窗 -->
    <a-modal
      v-model:visible="batchJian"
      @before-close="batchJian = false"
      width="600px"
      :mask-closable="false"
      title-align="start"
    >
      <template #title> 检测结果 </template>
      <div v-if="list.length > 1000">
        <a-alert type="warning" :show-icon="false">
          <div style="font-size: 13px">
            正在进行操作卡板，{{ nameBatch }}总数量{{
              list.length
            }}张，该操作不可逆，一旦操作成功数据将会改变。请输入下面内容再次确认操作。</div
          >
        </a-alert>
        <a-alert style="margin-top: 20px" type="error" :show-icon="false">
          <div style="text-align: center; font-size: 13px; color: #f53f3f">
            我确认操作总数量{{ list.length }}张卡的{{ nameBatch }}，确认操作无误</div
          >
        </a-alert>
        <a-input
          v-model="batchValue"
          style="margin-top: 20px"
          placeholder="请输入'确认操作'后，点击确定"
          :error="error"
          onpaste="return false"
        />
        <div style="font-size: 13px; margin-top: 10px"
          >当前操作只有在操作数量超过1000张的时候才会出现，只是为了避免操作失误</div
        >
      </div>
      <div v-else>
        <a-alert type="warning" :show-icon="false">
          <div style="text-align: center; font-size: 13px"
            >{{ nameBatch }}卡号数据：{{ nameBatch }}数量：<span style="color: #3491fa"
              >{{ list.length }}张</span
            ></div
          >
        </a-alert>
        <a-alert style="margin-top: 20px" type="error" :show-icon="false">
          <div style="text-align: center; font-size: 13px; color: #f53f3f">
            操作时一定要仔细核实好卡号和数量，避免造成不可挽回的损失</div
          >
        </a-alert>
      </div>
      <template #footer>
        <a-space>
          <a-button @click="batchJian = false">取消</a-button>
          <a-button type="primary" @click="batchQue">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <a-modal v-model:visible="erShow" title-align="start" title="一卡一码链接">
      <div style="display: flex; justify-content: center; margin: 20px">
        <img :src="imgUrl" style="width: 170px; height: 170px; text-align: center" alt="" />
      </div>
      <div style="display: flex; justify-content: center">
        <div
          style="
            width: 390px;
            background-color: #f2f3f5;
            border-radius: 4px;
            text-align: center;
            padding: 4px;
          "
        >
          <a id="bols" :href="urlsa" style="color: #000000" target="_blank">
            {{ urlsa }}
          </a>
        </div>
      </div>
      <div style="display: flex; justify-content: center; margin: 20px">
        <div style="display: flex; width: 390px; justify-content: space-between">
          <a-button type="primary" status="success" long @click="downs">保存二维码</a-button>
          <div style="width: 40px"></div>
          <a-button type="primary" long @click="useCommon.copy(urlsa)">复制链接</a-button>
        </div>
      </div>
      <template #footer>
        <a-space />
      </template>
    </a-modal>
    <a-modal
      v-model:visible="stepVisible"
      :title="'卡板' + names"
      width="640px"
      title-align="start"
    >
      <div>
        <a-steps :current="stepCurrent" status="finish" @change="setCurrent">
          <a-step description="本次操作检测结果">步骤一</a-step>
          <a-step description="不超过1000张自动跳过">步骤二</a-step>
          <a-step description="操作成功">步骤三</a-step>
        </a-steps>
        <div v-if="stepCurrent == 1" class="step1">
          <div class="top"> 注意：以下数据已去除重复卡，空卡号和不存在的卡 </div>
          <a-alert v-if="names != '删除'" type="normal" class="alert-text" :show-icon="false"
            >{{ names }}总数量：{{ jianceForm.total }}张</a-alert
          >
          <a-alert
            type="error"
            v-if="names != '删除'"
            class="alert-text"
            :show-icon="false"
            style="margin-top: 20px"
            >不可{{ names }}：{{ jianceForm.error }}张</a-alert
          >
          <a-alert
            type="error"
            v-if="names == '删除'"
            class="alert-text"
            :show-icon="false"
            style="margin-top: 20px"
            >{{ names }}数量：{{ jianceForm.total }}张</a-alert
          >
          <a-alert
            v-if="names != '删除'"
            :show-icon="false"
            class="alert-text"
            style="margin-top: 20px; background-color: #e8f7ff"
            >可{{ names }}：{{ jianceForm.success }}张</a-alert
          >
        </div>
        <div v-if="stepCurrent == 3" class="step1">
          <div class="top"> 注意：以下数据已去除重复卡，空卡号和不存在的卡 </div>
          <a-alert v-if="names != '删除'" type="normal" class="alert-text" :show-icon="false"
            >{{ names }}总数量：{{ jianceForm.total }}张</a-alert
          >
          <a-alert
            type="error"
            v-if="names != '删除'"
            class="alert-text"
            :show-icon="false"
            style="margin-top: 20px"
            >{{ names }}失败：{{ jianceForm.error }}张</a-alert
          >
          <a-alert
            type="error"
            v-if="names == '删除'"
            class="alert-text"
            :show-icon="false"
            style="margin-top: 20px"
            >{{ names }}数量：{{ jianceForm.total }}张</a-alert
          >
          <a-alert
            v-if="names != '删除'"
            :show-icon="false"
            class="alert-text"
            style="margin-top: 20px; background-color: #e8f7ff"
            >{{ names }}成功：{{ jianceForm.success }}张</a-alert
          >
        </div>
        <div v-if="stepCurrent == 2" class="step1">
          <div style="display: flex; margin-top: 20px">
            <a-alert v-if="names != '删除'" type="normal" class="alert-text" :show-icon="false"
              >{{ names }}总数量：{{ jianceForm.total }}张</a-alert
            >
            <a-alert
              v-if="names != '删除'"
              type="error"
              class="alert-text"
              :show-icon="false"
              style="margin: 0 20px"
              >不可{{ names }}：{{ jianceForm.error }}张</a-alert
            >
            <a-alert v-if="names == '删除'" type="error" class="alert-text" :show-icon="false"
              >{{ names }}数量：{{ jianceForm.total }}张</a-alert
            >
            <a-alert
              v-if="names != '删除'"
              :show-icon="false"
              class="alert-text"
              style="background-color: #e8f7ff"
              >可{{ names }}：{{ jianceForm.success }}张</a-alert
            >
          </div>
          <a-alert style="margin-top: 20px" :show-icon="false" type="warning"
            ><div>正在进行操作卡板分销，该操作不可逆。 </div
            ><div>一旦操作成功数据将会改变。请输入下面内容再次确认操作。</div></a-alert
          >
          <div style="padding: 20px 0"><a-divider dashed>确认操作</a-divider></div>
          <a-input
            v-model="errorValue"
            placeholder="请输入'确认操作'后，点击确定"
            :error="error"
            onpaste="return false"
          />
          <div style="font-size: 11px; margin-top: 10px; color: #656565"
            >当前操作只有在操作数量超过1000张的时候才会出现，只是为了避免操作失误</div
          >
        </div>
      </div>
      <template #footer>
        <a-space>
          <a-button @click="stepsClose">取消</a-button>
          <a-button type="primary" :loading="loadings" @click="conset">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 卡板详情 -->
    <a-drawer
      :width="1000"
      title="卡板详情"
      v-model:visible="detailVisible"
      :mask-closable="false"
      title-align="start"
      @before-close="detailCloseFn"
      :footer="false"
    >
      <div class="padding20">
        <div class="box">
          <div class="line"></div>
          <div class="text">基本信息 </div>
        </div>
      </div>
      <a-row class="padding20">
        <a-col :span="12">
          <div class="display-box">
            <img
              class="imgsa1"
              v-if="detail.series.operator == 0"
              src="@/assets/yd.png"
              alt="avatar"
            />
            <img
              class="imgsa1"
              v-if="detail.series.operator == 1"
              src="@/assets/lt.png"
              alt="avatar"
            />
            <img
              class="imgsa1"
              v-if="detail.series.operator == 2"
              src="@/assets/dx.png"
              alt="avatar"
            />
            <img
              class="imgsa1"
              v-if="detail.series.operator == 3"
              src="@/assets/gd.png"
              alt="avatar"
            />
            <div class="display-right">
              <div class="text-name"
                >卡号：{{ detail.card }}
                <img
                  @click="correctId(detail)"
                  style="width: 15px; height: 15px; margin-left: 10px"
                  src="@/assets/sb.png"
              /></div>
              <div class="text">卡板ID：{{ detail.id }}</div>
              <div class="text">入库时间：{{ detail.createTime }}</div>
            </div>
          </div>
        </a-col>
        <a-col :span="12">
          <div style="float: right">
            <div>
              <a-space style="float: right">
                <a-button class="width75px" size="small" @click="previousFn"> 上一张</a-button>
                <a-button class="width75px" size="small" @click="nextFn"> 下一张 </a-button>
                <a-button
                  class="width75px"
                  type="primary"
                  status="warning"
                  size="small"
                  @click="stopFn(detail)"
                  >停机</a-button
                >
                <a-button class="width75px" type="primary" size="small" @click="startFn(detail)"
                  >复机</a-button
                >
              </a-space>
            </div>
            <div class="white" style="margin-top: 14px; float: right">
              <a-space>
                <a-button size="small" class="width75px" @click="RefreshFn(detail, '')"
                  >卡板刷新</a-button
                >
                <a-button size="small" class="width75px" @click="mealFn(detail)">充值套餐</a-button>
                <a-button size="small" class="width75px" @click="balanceFn(detail, detail.balance)"
                  >充值余额</a-button
                >
                <a-button size="small" class="width75px" @click="passWordFn(detail.id)"
                  >修改密码</a-button
                >
                <a-button size="small" class="width75px" @click="jianCeFn(detail)"
                  >智能检测</a-button
                >
                <a-button size="small" class="width75px" @click="openOneCodeEr(detail)"
                  >一卡一码</a-button
                >
              </a-space>
            </div>
          </div>
        </a-col>
      </a-row>
      <div
        style="
          margin-top: 20px;
          border-top: 1px solid #f2f3f5;
          border-bottom: 1px solid #f2f3f5;
          padding: 20px 0;
        "
      >
        <a-grid :cols="6" :colGap="12" :rowGap="16" class="grid-demo-grid padding20">
          <a-grid-item class="demo-item">
            <div class="text-name">所属客户</div>
            <div class="text-info">
              <span v-if="detail.user">{{ detail.user.userName }}</span>
              <span v-else>- - - - </span>
            </div>
          </a-grid-item>
          <a-grid-item class="demo-item">
            <div class="text-name">卡板状态</div>
            <div class="text-info">
              <a-tag :color="detail.stateName.color">{{ detail.stateName.name }}</a-tag>
              <img
                @click="RefreshFn(detail, 1)"
                style="width: 15px; height: 15px; margin-left: 10px"
                src="@/assets/b.png"
              />
            </div>
          </a-grid-item>
          <a-grid-item class="demo-item">
            <div class="text-name">官方实名</div>
            <div class="text-info">
              <a-tag color="blue" v-if="detail.officialRealName == 0">已实名</a-tag>
              <a-tag v-else-if="detail.officialRealName == 1">未实名</a-tag>
              <a-tag v-else>未知</a-tag>
              <img
                @click="RefreshFn(detail, 2)"
                style="width: 15px; height: 15px; margin-left: 10px"
                src="@/assets/b.png"
              />
            </div>
          </a-grid-item>
          <a-grid-item class="demo-item">
            <div class="text-name">系统实名</div>
            <div class="text-info">
              <a-tag color="blue" v-if="detail.cardRealName">已实名</a-tag>
              <a-tag v-else>未实名</a-tag>
            </div>
          </a-grid-item>
          <a-grid-item class="demo-item">
            <div class="text-name">充值状态</div>
            <div class="text-info">
              <a-tag color="blue" v-if="detail.firstPayTime">已充值</a-tag>
              <a-tag v-else>未充值</a-tag>
            </div>
          </a-grid-item>
          <a-grid-item class="demo-item">
            <div class="text-name">限速状态</div>
            <div class="text-info">
              <a-tag color="red" v-if="detail.speedLimitTagId">已限速</a-tag>
              <a-tag v-else>未限速</a-tag>
            </div>
          </a-grid-item>
          <a-grid-item class="demo-item">
            <div class="text-name">卡板余额</div>
            <div class="text-info">{{ detail.balance }} 元 </div>
          </a-grid-item>
          <a-grid-item class="demo-item">
            <div class="text-name">总流量</div>
            <div class="text-info">
              <span v-if="detail.free != undefined">
                {{ Math.floor(((detail.used + detail.free) / 1024) * 100) / 100 }}G</span
              >
              <span v-else> 无限</span>
              <img
                @click="RefreshFn(detail, 0)"
                style="width: 15px; height: 15px; margin-left: 10px"
                src="@/assets/b.png"
              />
            </div>
          </a-grid-item>
          <a-grid-item class="demo-item">
            <div class="text-name">已用流量</div>
            <div class="text-info"> {{ Math.floor((detail.used / 1024) * 100) / 100 }}G</div>
          </a-grid-item>
          <a-grid-item class="demo-item">
            <div class="text-name">真实已用</div>
            <div class="text-info">
              <span v-if="detail.realUsed != undefined"
                >{{ Math.floor((detail.realUsed / 1024) * 100) / 100 }}G</span
              >
              <span v-else> - - -</span>
            </div>
          </a-grid-item>
          <a-grid-item class="demo-item">
            <div class="text-name">上游已用</div>
            <div class="text-info">
              <div v-if="detail.upstreamFlow != undefined">
                {{ Math.floor((detail.upstreamFlow / 1024) * 100) / 100 }}G</div
              >
              <div v-else> ---</div>
            </div>
          </a-grid-item>
          <a-grid-item class="demo-item">
            <div class="text-name">剩余流量</div>
            <div class="text-info">
              <span v-if="detail.free != undefined"
                >{{ Math.floor((detail.free / 1024) * 100) / 100 }}G</span
              >
              <span v-else> 无限</span>
            </div>
          </a-grid-item>
        </a-grid>
      </div>
      <div class="tabs-button padding20">
        <a-radio-group style="width: 100%" v-model="key" type="button">
          <a-radio value="card">卡板详情</a-radio>
          <a-radio value="flow" @click="doRefreshOperate1(1)">每日用量</a-radio>
          <a-radio value="operate" @click="doRefreshOperate(1)">操作日志</a-radio>
          <a-radio value="balance" @click="doRefreshPay(1)">余额明细</a-radio>
          <a-radio value="meal" @click="doRefreshOrder(1)">套餐订单</a-radio>
          <a-radio value="balanceOrder" @click="doRefreshOperate5(1)">余额订单</a-radio>
          <a-radio value="coupon" @click="couponOrderdoRefresh(1)">券包订单</a-radio>
          <a-radio value="vip" @click="vipOrderdoRefresh(1)">会员订单</a-radio>
        </a-radio-group>
      </div>
      <div v-if="key == 'card'" class="col-div">
        <div>
          <div class="box">
            <div class="line"></div>
            <div class="text">卡板信息 </div>
          </div>
        </div>
        <a-row>
          <a-col :span="12"> 接口卡号：{{ detail.apiCard }} </a-col>
          <a-col :span="12"> 完整卡号：{{ detail.iccid }} </a-col>
          <a-col :span="12"> 实名卡号：{{ detail.realNameCard }} </a-col>
          <a-col :span="12"> IMSI：{{ detail.imsi }} </a-col>
          <a-col :span="12"> IMEI：{{ detail.imei }} </a-col>
          <a-col :span="12"> 所属渠道：{{ detail.series.channel.name }} </a-col>
          <a-col :span="12"> 所属系列：{{ detail.series.name }} </a-col>
          <a-col :span="12"> 充值次数：{{ detail.payNumber }} </a-col>
          <a-col :span="12"> 登录IP：{{ detail.ip }} </a-col>
          <a-col :span="12"> 登录地址：{{ detail.ipAddress }} </a-col>
          <a-col :span="12"> 入库时间：{{ detail.createTime }} </a-col>
          <a-col :span="12"> 流量更新：{{ detail.flowRefreshTime }} </a-col>
          <a-col :span="12"> 状态更新：{{ detail.stateRefreshTime }} </a-col>
          <a-col :span="12"> 实名更新：{{ detail.realNameRefreshTime }} </a-col>
        </a-row>
        <div>
          <div class="box">
            <div class="line"></div>
            <div class="text">时间信息 </div>
          </div>
        </div>
        <a-row>
          <a-col :span="12"> 套餐到期：{{ detail.expirationTime }} </a-col>
          <a-col :span="12"> 最后套餐到期：{{ detail.expirationTime }} </a-col>
          <a-col :span="12"> 首充套餐：{{ detail.firstPayTime }} </a-col>
          <a-col :span="12"> 最近充值套餐：{{ detail.lastPayTime }} </a-col>
          <a-col :span="12"> 首充余额：{{ detail.firstPayBalanceTime }} </a-col>
          <a-col :span="12"> 最近充值余额：{{ detail.lastPayBalanceTime }} </a-col>
          <a-col :span="12"> 首次充值：{{ detail.firstPayCouponTime }} </a-col>
          <a-col :span="12"> 最后购买券包：{{ detail.lastPayCouponTime }} </a-col>
          <a-col :span="12"> 首次登录：{{ detail.firstLoginTime }} </a-col>
          <a-col :span="12"> 最近登录时间：{{ detail.lastLoginTime }} </a-col>
          <a-col :span="12"> 首充会员：{{ detail.firstPayVipTime }} </a-col>
          <a-col :span="12"> 最近充值会员：{{ detail.lastPayVipTime }} </a-col>
        </a-row>
        <div>
          <div class="box">
            <div class="line"></div>
            <div class="text">实名信息 </div>
          </div>
        </div>
        <a-row>
          <a-col :span="12">
            客户姓名：{{ detail.cardRealName ? detail.cardRealName.name : '' }}
          </a-col>
          <a-col :span="12">
            手机号码：{{ detail.cardRealName ? detail.cardRealName.phone : '' }}
          </a-col>
          <a-col :span="12">
            身份证号：{{ detail.cardRealName ? detail.cardRealName.identityCard : '' }}
          </a-col>
        </a-row>
      </div>
      <div v-if="key == 'flow'" class="col-div">
        <div>
          <div class="box">
            <div class="line"></div>
            <div class="text" style="text-align: center">
              流量详情
              <a-trigger trigger="hover">
                <img style="width: 15px; height: 15px; margin-left: 10px" src="@/assets/wuyu.png" />
                <template #content>
                  <div style="background-color: #ffffff; padding: 10px">
                    <div>
                      <a-checkbox @change="changeFn2" v-model="chack2">真实已用</a-checkbox></div
                    >
                    <div
                      ><a-checkbox @change="changeFn3" v-model="chack3">真实总已用</a-checkbox></div
                    >
                    <div>
                      <a-checkbox @change="changeFn" v-model="chack">使用流量</a-checkbox>
                    </div>
                    <div
                      ><a-checkbox @change="changeFn1" v-model="chack1">总使用流量</a-checkbox></div
                    >
                    <div
                      ><a-checkbox @change="changeFn4" v-model="chack4">记录时间</a-checkbox></div
                    >
                  </div>
                </template>
              </a-trigger>
            </div>
          </div>
        </div>
        <a-table :columns="columns4" :pagination="false" :loading="load4" :data="rebateListse1">
          <template #columns>
            <a-table-column
              v-for="item of columns4"
              :key="item.key"
              align="left"
              :title="(item.title as string)"
              :ellipsis="true"
              :tooltip="true"
            >
              <template v-if="item.key === 'time'" #cell="{ record }">
                <span>{{ dateTime(record.time) }}</span>
              </template>
              <template v-if="item.key === 'realUsed'" #cell="{ record }">
                <span>{{ useCommon.numbers1(record.realUsed) }}</span>
              </template>
              <template v-if="item.key === 'used'" #cell="{ record }">
                <span>{{ useCommon.numbers1(record.used) }}</span>
              </template>
              <template v-if="item.key === 'totalUsed'" #cell="{ record }">
                <span>{{ useCommon.numbers1(record.totalUsed) }}</span>
              </template>
              <template v-if="item.key === 'totalRealUsed'" #cell="{ record }">
                <span>{{ useCommon.numbers1(record.totalRealUsed) }}</span>
              </template>
            </a-table-column>
          </template>
        </a-table>
        <TableFooter :pagination="pagination4" />
      </div>
      <div v-if="key == 'operate'" class="col-div">
        <div>
          <div class="box">
            <div class="line"></div>
            <div class="text">日志列表 </div>
          </div>
        </div>
        <a-table :columns="columns3" :pagination="false" :loading="load3" :data="rebateListse">
          <template #columns>
            <a-table-column
              v-for="item of columns3"
              :key="item.key"
              align="left"
              :title="(item.title as string)"
              :ellipsis="true"
              :tooltip="true"
            >
              <template v-if="item.key === 'time'" #cell="{ record }">
                <span>{{ record.time }}</span>
              </template>
              <template v-if="item.key === 'source'" #cell="{ record }">
                <a-space>
                  <a-tag v-if="record.source == 0">系统内部</a-tag>
                  <a-tag v-else-if="record.source == 1">管理员后台</a-tag>
                  <a-tag v-else-if="record.source == 2">代理后台</a-tag>
                  <a-tag v-else-if="record.source == 3">充值前端</a-tag>
                  <a-tag v-else-if="record.source == 4">API</a-tag>
                  <a-tag v-else-if="record.source == 5">系统轮询</a-tag>
                </a-space>
              </template>
              <template v-if="item.key === 'type'" #cell="{ record }">
                <a-space>
                  <a-tag v-if="record.type == 0">复机</a-tag>
                  <a-tag v-else-if="record.type == 1">停机</a-tag>
                  <a-tag v-else-if="record.type == 2">机卡绑定</a-tag>
                  <a-tag v-else-if="record.type == 3">删除官方实名</a-tag>
                  <a-tag v-else-if="record.type == 4">卡板限速</a-tag>
                  <a-tag v-else-if="record.type == 5">解除限速</a-tag>
                  <a-tag v-else-if="record.type == 6">实名变更</a-tag>
                </a-space>
              </template>
              <template v-if="item.key === 'success'" #cell="{ record }">
                <a-space>
                  <a-tag v-if="record.error" color="red">失败</a-tag>
                  <a-tag v-else color="arcoblue">成功</a-tag>
                </a-space>
              </template>
            </a-table-column>
          </template>
        </a-table>
        <TableFooter :pagination="pagination3" />
      </div>
      <div v-if="key == 'balance'" class="col-div">
        <div>
          <div class="box">
            <div class="line"></div>
            <div class="text">明细列表 </div>
          </div>
        </div>
        <a-table
          :scroll="{ x: 1200 }"
          :scrollbar="{ type: 'track', outerClass: '', outerStyle: '' }"
          :columns="columns2"
          :loading="load2"
          :pagination="false"
          :data="rebateLists"
        >
          <template #columns>
            <a-table-column
              v-for="item of columns2"
              :key="item.key"
              align="left"
              :title="(item.title as string)"
              :data-index="(item.key as string)"
              :ellipsis="true"
              :tooltip="true"
            >
              <template v-if="item.key === 'remarks'" #cell="{ record }">
                <span v-if="record.remarks">{{ record.remarks }}</span>
                <span v-else>---</span>
              </template>
              <template v-else-if="item.key === 'add'" #cell="{ record }">
                <a-tag color="blue" v-if="record.add === true">增加</a-tag>
                <a-tag color="red" v-else-if="record.add === false">减少</a-tag>
              </template>
              <template v-else-if="item.key === 'type'" #cell="{ record }">
                <span
                  v-for="(items, index) in typeListsa"
                  :key="index"
                  v-show="items.type == record.type"
                  >{{ items.message }}</span
                >
              </template>
            </a-table-column>
          </template>
        </a-table>
        <TableFooter :pagination="pagination2" />
      </div>
      <div v-if="key == 'meal'" class="col-div">
        <a-table
          :scroll="{ x: 1200 }"
          :scrollbar="{ type: 'track', outerClass: '', outerStyle: '' }"
          :columns="columns1"
          :loading="load1"
          :pagination="false"
          :data="rebateList"
        >
          <template #columns>
            <a-table-column
              v-for="item of columns1"
              :key="item.key"
              align="left"
              :title="(item.title as string)"
              :ellipsis="true"
              :tooltip="true"
            >
              <template v-if="item.key === 'setMealName'" #cell="{ record }">
                <span>{{ record.setMealName }}</span>
              </template>
              <template v-if="item.key === 'paymentAmount'" #cell="{ record }">
                <span>{{ record.paymentAmount }}</span>
              </template>
              <template v-if="item.key === 'createTime'" #cell="{ record }">
                <span>{{ record.createTime }}</span>
              </template>
              <template v-if="item.key === 'effective'" #cell="{ record }">
                <a-tag color="blue" v-if="record.effectiveState == 0">立即生效</a-tag>
                <a-tag color="blue" v-else-if="record.effectiveState == 1">本月生效</a-tag>
                <a-tag color="blue" v-if="record.effectiveState == 2">次月生效</a-tag>
                <a-tag color="blue" v-else-if="record.effectiveState == 3">月底顺延</a-tag>
                <a-tag color="blue" v-if="record.effectiveState == 4">跨月顺延</a-tag>
              </template>
              <template v-if="item.key === 'state'" #cell="{ record }">
                <a-tag color="red" v-if="record.state == 4">退款</a-tag>
                <a-tag color="red" v-else-if="record.state == 3">失败</a-tag>
                <a-tag color="blue" v-else-if="record.state == 2">成功</a-tag>
                <a-tag color="orangered" v-else-if="record.state == 1">进行</a-tag>
                <a-tag color="orangered" v-else-if="record.state == 0">等待</a-tag>
                <a-tag color="red" v-else-if="record.state == -1">删除</a-tag></template
              >
              <template v-else-if="item.key === 'payType'" #cell="{ record }">
                <div v-if="record.payType == 0"> 余额</div>
                <div v-if="record.payType == 1"> 支付宝</div>
                <div v-if="record.payType == 2"> 微信</div>
                <div v-if="record.payType == 3"> 接口</div>
                <div v-if="record.payType == 4"> 批量</div>
              </template>
              <template v-if="item.key === 'action'" #cell="{ record }">
                <a-space :size="2">
                  <a-button
                    style="margin-right: 5px; padding: 0px"
                    type="text"
                    size="small"
                    @click="delOrder(record)"
                    >删除</a-button
                  >
                </a-space>
              </template>
            </a-table-column>
          </template>
        </a-table>
        <TableFooter :pagination="pagination1" />
      </div>
      <div v-if="key == 'balanceOrder'" class="col-div">
        <a-table :columns="columns5" :loading="load2" :pagination="false" :data="rebateLists5">
          <template #columns>
            <a-table-column
              v-for="item of columns5"
              :key="item.key"
              align="left"
              :title="(item.title as string)"
              :ellipsis="true"
              :tooltip="true"
            >
              <template v-if="item.key === 'paymentAmount'" #cell="{ record }">
                <span>{{ record.paymentAmount }}元</span>
              </template>
              <template v-if="item.key === 'createTime'" #cell="{ record }">
                <span>{{ record.createTime }}</span>
              </template>
              <template v-else-if="item.key === 'type'" #cell="{ record }">
                <div v-if="record.type == 0"> 支付宝</div>
                <div v-if="record.type == 1"> 微信</div>
              </template>
            </a-table-column>
          </template>
        </a-table>
        <TableFooter :pagination="pagination5" />
      </div>
      <div v-if="key == 'coupon'" class="col-div">
        <a-table
          style="margin-top: 20px"
          :loading="loading10"
          :bordered="{ wrapper: true, cell: tables.bordered }"
          :stripe="(tables.striped as boolean)"
          :data="couponOrderList"
          :pagination="false"
          :row-key="rowKey"
          :scroll="{ x: 1500 }"
          :scrollbar="{ type: 'track', outerClass: '', outerStyle: '' }"
        >
          <template #columns>
            <a-table-column
              v-for="item of tableColumns4.list"
              :key="item.key"
              align="left"
              :title="(item.title as string)"
              :width="item.width"
              :data-index="(item.key as string)"
              :fixed="item.fixed"
              :ellipsis="true"
              :tooltip="true"
            >
              <template v-if="item.key === 'couponName'" #cell="{ record }">
                <div class="ba">
                  <img
                    v-if="record.type === 0"
                    src="@/assets/order/zf.png"
                    style="width: 16px; height: 16px; margin-right: 5px"
                    mode=""
                  />
                  <img
                    v-if="record.type === 1"
                    src="@/assets/order/w.png"
                    style="width: 16px; height: 16px; margin-right: 5px"
                    mode=""
                  />
                  <img
                    v-if="record.type === 2"
                    src="@/assets/order/p.jpg"
                    style="width: 16px; height: 16px; margin-right: 5px"
                    mode=""
                  />
                  <img
                    v-if="record.type === 3"
                    src="@/assets/order/zs.jpg"
                    style="width: 16px; height: 16px; margin-right: 5px"
                    mode=""
                  />
                  <span>{{ record.couponName }}</span>
                </div>
              </template>
              <template v-if="item.key === 'state'" #cell="{ record }">
                <a-tag color="blue" v-if="record.state == 0">正常</a-tag>
                <a-tag color="red" v-if="record.state == 1">退款</a-tag>
              </template>

              <template v-else-if="item.key === 'couponCount'" #cell="{ record }">
                <span>{{ record.num }}/{{ record.couponCount }}</span>
              </template>
              <template v-else-if="item.key === 'couponAmount'" #cell="{ record }">
                <span>{{ record.couponAllAmount }}</span>
              </template>
              <template v-else-if="item.key === 'paymentAmount'" #cell="{ record }">
                <span>{{ Math.floor(record.paymentAmount * 100) / 100 }}</span>
              </template>
              <template v-else-if="item.key === 'userName'" #cell="{ record }">
                <span v-if="record.user">{{ record.user.userName }}</span>
                <span v-else>管理员 </span>
              </template>
              <template v-else-if="item.key === 'endUseTime'" #cell="{ record }">
                <span v-if="record.endUseTime">{{ record.endUseTime }}</span>
                <span v-else>---</span>
              </template>
              <template v-else-if="item.key === 'addUseTime'" #cell="{ record }">
                <span v-if="record.addUseTime">{{ record.addUseTime }}</span>
                <span v-else>---</span>
              </template>
              <template v-else-if="item.key === 'refundTime'" #cell="{ record }">
                <span v-if="record.refundTime">{{ record.refundTime }}</span>
                <span v-else>---</span>
              </template>
              <template v-else-if="item.key === 'refundRemarks'" #cell="{ record }">
                <span v-if="record.refundRemarks">{{ record.refundRemarks }}</span>
                <span v-else>---</span>
              </template>
            </a-table-column>
          </template>
        </a-table>
        <TableFooter :pagination="paginationCoupon" />
      </div>
      <div v-if="key == 'vip'" class="col-div">
        <a-table
          style="margin-top: 20px"
          :loading="stateVisiblekl"
          :bordered="{ wrapper: true, cell: tables.bordered }"
          :stripe="(tables.striped as boolean)"
          :data="vipOrderList"
          :pagination="false"
          :row-key="rowKey"
          :scroll="{ x: 1500 }"
          :scrollbar="{ type: 'track', outerClass: '', outerStyle: '' }"
        >
          <template #columns>
            <a-table-column
              v-for="item of tableColumns5.list"
              :key="item.key"
              align="left"
              :title="(item.title as string)"
              :width="item.width"
              :data-index="(item.key as string)"
              :fixed="item.fixed"
              :ellipsis="true"
              :tooltip="true"
            >
              <template v-if="item.key === 'vipName'" #cell="{ record }">
                <div class="ba">
                  <img
                    v-if="record.type === 0"
                    src="@/assets/order/y.jpg"
                    style="width: 16px; height: 16px; margin-right: 5px"
                    mode=""
                  />
                  <img
                    v-if="record.type === 1"
                    src="@/assets/order/zf.png"
                    style="width: 16px; height: 16px; margin-right: 5px"
                    mode=""
                  />
                  <img
                    v-if="record.type === 2"
                    src="@/assets/order/w.png"
                    style="width: 16px; height: 16px; margin-right: 5px"
                    mode=""
                  />
                  <span>{{ record.vipName }}</span>
                </div>
              </template>
              <template v-if="item.key === 'state'" #cell="{ record }">
                <a-tag color="blue" v-if="record.state == 0">正常</a-tag>
                <a-tag color="red" v-if="record.state == 1">退款</a-tag>
              </template>
              <template v-else-if="item.key === 'couponCount'" #cell="{ record }">
                <span>{{ record.vipTime }}{{ record.vipTimeType == 0 ? '天' : '月' }}</span>
              </template>
              <template v-else-if="item.key === 'couponAmount'" #cell="{ record }">
                <span>{{ record.couponAmount }}/{{ record.couponAllAmount }}</span>
              </template>
              <template v-else-if="item.key === 'userName'" #cell="{ record }">
                <span v-if="record.user">{{ record.user.userName }}</span>
                <span v-else>管理员 </span>
              </template>
              <template v-else-if="item.key === 'endUseTime'" #cell="{ record }">
                <span v-if="record.endUseTime">{{ record.endUseTime }}</span>
                <span v-else>---</span>
              </template>
              <template v-else-if="item.key === 'addUseTime'" #cell="{ record }">
                <span v-if="record.addUseTime">{{ record.addUseTime }}</span>
                <span v-else>---</span>
              </template>
              <template v-else-if="item.key === 'refundTime'" #cell="{ record }">
                <span v-if="record.refundTime">{{ record.refundTime }}</span>
                <span v-else>---</span>
              </template>
              <template v-else-if="item.key === 'refundRemarks'" #cell="{ record }">
                <span v-if="record.refundRemarks">{{ record.refundRemarks }}</span>
                <span v-else>---</span>
              </template>
            </a-table-column>
          </template>
        </a-table>
        <TableFooter :pagination="paginationVip" />
      </div>
    </a-drawer>
  </div>
</template>

<script lang="ts" setup>
  import useCommonStore from '@/store/modules/common'
  import * as http from '@/api/http'
  import {
    cardList,
    exportCardList,
    postOrderly,
    postDisOrder,
    postOrderlyCheck,
    postDisOrderCheck,
    parameterPostOrderly,
    parameterPostDisOrder,
    postOrderlyCheckParameter,
    postDisOrderCheckParameter,
    recoveryPostOrderly,
    recoveryPostDisOrder,
    postOrderlyCheckRecovery,
    postDisOrderCheckRecovery,
    deletePostOrderly,
    deletePostDisOrder,
    postOrderlyCheckDelete,
    postDisOrderCheckDelete,
    // getCancelType,
    getCancelClass,
    updateCancelLise,
    balance,
    passWord,
    update,
    refresh,
    start,
    stop,
    orderpay,
    mealLists,
    orderList,
    rechargeCardList,
    deleteorder,
    getOperationList,
    cardName,
    dosage,
    cardRemarkOrderly,
    cardRemarkDisorder,
    cardStatistics,
    getCardId,
    youxuCardPay,
    balanceDisorder,
    oneCodeDetection,
    oneCodeBind,
    qr,
    oneCodeBang,
    byCard,
    couponBy,
    cardSingle,
    billCard,
    billName,
    ordercoupon,
    speedOrderList,
  } from '@/api/url'
  import md5 from 'js-md5'
  import { get, formpost, post } from '@/api/http'
  import { usePagination, useRowKey, useTable } from '@/hooks/table'
  import { TablePropsType } from '@/types/components'
  import { Form, Message, Modal } from '@arco-design/web-vue'
  import { onMounted, onUnmounted, reactive, ref } from 'vue'
  import qs from 'qs'

  const checked1s = ref(false)
  const channelId = ref(0)
  function changeCardRadio() {
    if (checked1.value == 'seach') {
      formpost({
        url: getCardId,
        data: () => {
          return {
            ...form,
            userIds: form.userIds.toString(),
            states: form.states.toString(),
            channelIds: form.channelIds.toString(),
            seriesIds: form.seriesIds.toString(),
          }
        },
      })
        .then((res) => {
          if (res.code == 0) {
            channelId.value = res.data[0].channelId
          }
        })
        .catch(console.log)
    } else if (checked1.value == 'orderly') {
      formpost({
        url: getCardId,
        data: () => {
          return {
            addCard: parameterForm.addCard,
            endCard: parameterForm.endCard,
          }
        },
      })
        .then((res) => {
          if (res.code == 0) {
            channelId.value = res.data[0].channelId
          }
        })
        .catch(console.log)
    } else if (checked1.value == 'disOrder') {
      formpost({
        url: getCardId,
        data: () => {
          return {
            cards: parameterForm.cardMultiline.split(/\n/g).join(','),
          }
        },
      })
        .then((res) => {
          if (res.code == 0) {
            channelId.value = res.data[0].channelId
          }
        })
        .catch(console.log)
    }
  }

  function changeChecked() {
    if (channelId.value == 0) {
      Message.error('请先选择卡号')
    } else {
      if (checked1s.value) {
        useCommon.seriess(channelId.value).then((res: any) => {
          seriesA.value = res.data
        })
        parameterForm.value.seriesId = ''
      } else {
        useCommon.seriess().then((res: any) => {
          seriesA.value = res.data
        })
        parameterForm.value.seriesId = ''
      }
    }
  }

  const seriesA: any = ref([])

  //清除数据
  const timeForm: any = ref({
    pay: false, //          充值
    balance: false, //      余额
    coupon: false, //       优惠卷
    vip: false, //          极速会员
    cancellation: false, // 注销
    change: false, //       换卡
    transfer: false, //     转移
    expire: false, //   到期时间
    order: false, //  所有订单
    bill: false, //  余额账单
  })
  const batchRef8 = ref()
  //清除数据
  function batchRefFn8() {
    batchRef8.value?.validate().then((error: any) => {
      if (!error) {
        batchList.value = []
        batchValue.value = ''
        count.value = 0
        zong.value = {
          success: 0,
          error: 0,
        }
        errorList.value = []
        clearInterval(intervalId.value)
        set.value = JSON.parse(JSON.stringify(timeForm.value))
        if (batchChecked.value == 'seach') {
          console.log(batchChecked.value)
          formpost({
            url: getCardId,
            data: () => {
              return {
                ...form,
                userIds: form.userIds.toString(),
                states: form.states.toString(),
                channelIds: form.channelIds.toString(),
                seriesIds: form.seriesIds.toString(),
              }
            },
          })
            .then((res) => {
              if (res.code == 0) {
                if (res.data.length > 1000) {
                  list.value = res.data
                  batchJian.value = true
                } else if (res.data.length > 0) {
                  list.value = res.data
                  batchJian.value = true
                } else {
                  Message.error('无可操作的卡')
                }
              }
            })
            .catch(console.log)
        } else if (batchChecked.value == 'orderly') {
          formpost({
            url: getCardId,
            data: () => {
              return {
                addCard: batchForm.value.addCard,
                endCard: batchForm.value.endCard,
              }
            },
          })
            .then((res) => {
              if (res.code == 0) {
                if (res.data.length > 1000) {
                  list.value = res.data
                  batchJian.value = true
                } else if (res.data.length > 0) {
                  list.value = res.data
                  batchJian.value = true
                } else {
                  Message.error('无可操作的卡')
                }
              }
            })
            .catch(console.log)
        } else if (batchChecked.value == 'disOrder') {
          formpost({
            url: getCardId,
            data: () => {
              return {
                cards: batchForm.value.cardMultiline.split(/\n/g).join(','),
              }
            },
          })
            .then((res) => {
              if (res.code == 0) {
                if (res.data.length > 1000) {
                  list.value = res.data
                  batchJian.value = true
                } else if (res.data.length > 0) {
                  list.value = res.data
                  batchJian.value = true
                } else {
                  Message.error('无可操作的卡')
                }
              }
            })
            .catch(console.log)
        }
      }
    })
  }

  const tableIndex = ref(0)
  function handleRowClick(record: any) {
    // 获取行的下标
    tableIndex.value = table.dataList.findIndex((element: any) => element.id === record.id)
  }
  function previousFn() {
    tableIndex.value--
    if (tableIndex.value < 0) {
      tableIndex.value = table.dataList.length - 1
      detailFn(table.dataList[tableIndex.value])
    } else {
      detailFn(table.dataList[tableIndex.value])
    }
    key.value = 'card'
  }

  function nextFn() {
    tableIndex.value++
    if (tableIndex.value > table.dataList.length - 1) {
      tableIndex.value = 0
      detailFn(table.dataList[tableIndex.value])
    } else {
      detailFn(table.dataList[tableIndex.value])
    }
    key.value = 'card'
  }
  const zhiVisible = ref(false)
  const chack = ref(true)
  const chack1 = ref(true)
  const chack2 = ref(true)
  const chack3 = ref(true)
  const chack4 = ref(true)
  function changeFn(val: any) {
    if (val == true) {
      columns4.value.splice(2, 0, {
        title: '使用流量',
        key: 'used',
      })
    } else {
      columns4.value.forEach((item: any, index: any) => {
        if (item.title == '使用流量') {
          columns4.value.splice(index, 1)
        }
      })
    }
  }
  function changeFn1(val: any) {
    if (val == true) {
      columns4.value.splice(3, 0, {
        title: '总使用流量',
        key: 'totalUsed',
      })
    } else {
      columns4.value.forEach((item: any, index: any) => {
        if (item.title == '总使用流量') {
          columns4.value.splice(index, 1)
        }
      })
    }
  }
  function changeFn2(val: any) {
    if (val == true) {
      columns4.value.splice(0, 0, {
        title: '真实已用',
        key: 'realUsed',
      })
    } else {
      columns4.value.forEach((item: any, index: any) => {
        if (item.title == '真实已用') {
          columns4.value.splice(index, 1)
        }
      })
    }
  }
  function changeFn3(val: any) {
    if (val == true) {
      columns4.value.splice(1, 0, {
        title: '真实总已用',
        key: 'totalRealUsed',
      })
    } else {
      columns4.value.forEach((item: any, index: any) => {
        if (item.title == '真实总已用') {
          columns4.value.splice(index, 1)
        }
      })
    }
  }
  function changeFn4(val: any) {
    if (val == true) {
      columns4.value.splice(4, 0, {
        title: '记录时间',
        key: 'time',
      })
    } else {
      columns4.value.forEach((item: any, index: any) => {
        if (item.title == '记录时间') {
          columns4.value.splice(index, 1)
        }
      })
    }
  }
  const useCommon = useCommonStore()
  const table = useTable()
  const pagination = usePagination(doRefresh)
  const pagination1 = usePagination(doRefreshOrder)
  const pagination2 = usePagination(doRefreshPay)
  const pagination3 = usePagination(doRefreshOperate)
  const pagination4 = usePagination(doRefreshOperate1)
  const pagination5 = usePagination(doRefreshOperate5)
  const paginationCoupon = usePagination(couponOrderdoRefresh)
  const load4 = ref(false)
  const batchShow = ref(false)
  const rebateLists = ref([])
  const rebateList5 = ref([])
  const lists: any = ref([])
  const rebateList = ref([])
  const rebateListse = ref([])
  const rebateListse1 = ref([])
  const load1 = ref(false)
  const load2 = ref(false)
  const load3 = ref(false)
  const remarkShow = ref(false)
  const oneCodeShow = ref(false)
  const remarkC = ref('orderly')
  const loadingRemark = ref(false)
  const types = ref('flowRefreshTime')
  const typesNum = ref('')
  const batchChecked = ref('orderly')
  const stepVisible = ref(false)
  const stepCurrent = ref(1)
  const batchForm = ref({
    addCard: '',
    endCard: '',
    time: 3,
    type: 0,
    cardMultiline: '',
    balance: 0,
    setMealId: '',
    next: 0,
    upstream: 1,
    remarks: '',
  })
  const columns1 = [
    {
      title: '套餐名称',
      key: 'setMealName',
    },
    {
      title: '订单时间',
      key: 'effective',
    },
    {
      title: '充值途径',
      key: 'payType',
    },
    {
      title: '充值金额',
      key: 'paymentAmount',
    },
    {
      title: '充值时间',
      key: 'createTime',
    },
    {
      title: '订单状态',
      key: 'state',
    },
    {
      title: '操作',
      key: 'action',
    },
  ]
  const columns2 = [
    {
      title: '类型',
      key: 'type',
      dataIndex: 'type',
      checked: true,
      width: 120,
    },
    {
      title: '状态',
      key: 'add',
      dataIndex: 'add',
      checked: true,
      width: 120,
    },
    {
      title: '交易前余额',
      key: 'addBalance',
      dataIndex: 'addBalance',
      checked: true,
      width: 120,
    },
    {
      title: '交易余额',
      key: 'balance',
      dataIndex: 'balance',
      checked: true,
      width: 120,
    },
    {
      title: '交易后余额',
      key: 'endBalance',
      dataIndex: 'endBalance',
      checked: true,
      width: 120,
    },
    {
      title: '交易备注',
      key: 'remarks',
      dataIndex: 'remarks',
      checked: true,
      width: 120,
    },
    {
      title: '创建时间',
      key: 'createTime',
      dataIndex: 'createTime',
      checked: true,
      width: 190,
    },
  ]
  const columns3 = [
    {
      title: '操作来源',
      key: 'source',
    },

    {
      title: '操作类型',
      key: 'type',
    },
    {
      title: '操作状态',
      key: 'success',
    },
    {
      title: '操作时间',
      key: 'time',
    },
  ]
  const columns5 = [
    {
      title: '充值金额',
      key: 'paymentAmount',
    },

    {
      title: '充值途径',
      key: 'type',
    },
    {
      title: '充值时间',
      key: 'createTime',
    },
  ]
  const columns4 = ref([
    {
      title: '显示已用',
      key: 'used',
    },

    {
      title: '显示总已用',
      key: 'totalUsed',
    },
    {
      title: '真实已用',
      key: 'realUsed',
    },
    {
      title: '真实总已用',
      key: 'totalRealUsed',
    },
    {
      title: '记录时间',
      key: 'time',
    },
  ])
  const nameMSG = ref([
    {
      title: '卡板ID',
      key: 'id',
      dataIndex: 'id',
      checked: true,
      width: 100,
    },
    {
      title: '客户账号',
      key: 'userName',
      dataIndex: 'userName',
      checked: true,
      width: 130,
    },
    {
      title: '卡号',
      key: 'card',
      dataIndex: 'card',
      checked: true,
      width: 270,
    },
    {
      title: '总流量',
      key: 'total',
      dataIndex: 'total',
      checked: true,
      width: 120,
    },
    {
      title: '已用流量',
      key: 'used',
      dataIndex: 'used',
      checked: true,
      width: 120,
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '上游已用',
      key: 'upstream_flow',
      dataIndex: 'upstream_flow',
      checked: true,
      width: 120,
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '剩余流量',
      key: 'free',
      dataIndex: 'free',
      checked: true,
      width: 120,
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '卡板余额',
      key: 'balance',
      dataIndex: 'balance',
      checked: true,
      width: 120,
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '充值次数',
      key: 'payNumber',
      dataIndex: 'payNumber',
      checked: true,
      width: 100,
    },

    {
      title: '卡板状态',
      key: 'stateName',
      dataIndex: 'stateName',
      checked: true,
      width: 100,
    },
    {
      title: '异常状态',
      key: 'exceptionType',
      dataIndex: 'exceptionType',
      checked: true,
      width: 100,
    },
    {
      title: '在线状态',
      key: 'online',
      dataIndex: 'online',
      checked: true,
      width: 100,
    },
    {
      title: '充值状态',
      key: 'firstPayTime',
      dataIndex: 'firstPayTime',
      checked: true,
      width: 100,
    },
    {
      title: '系统实名',
      key: 'cardRealName',
      dataIndex: 'cardRealName',
      checked: true,
      width: 100,
    },
    {
      title: '官方实名',
      key: 'officialRealName',
      dataIndex: 'officialRealName',
      checked: true,
      width: 100,
    },
    {
      title: '限速状态',
      key: 'speedLimitTagId',
      dataIndex: 'speedLimitTagId',
      checked: true,
      width: 100,
    },
    {
      title: '注销状态',
      key: 'cancellationGroupId',
      dataIndex: 'cancellationGroupId',
      checked: true,
      width: 100,
    },
    {
      title: '换卡状态',
      key: 'changeGroupId',
      dataIndex: 'changeGroupId',
      checked: true,
      width: 100,
    },
    {
      title: '分销状态',
      key: 'userId',
      dataIndex: 'userId',
      checked: true,
      width: 100,
    },
    {
      title: '所属渠道',
      key: 'channel',
      dataIndex: 'channel',
      checked: true,
      width: 100,
    },
    {
      title: '所属系列',
      key: 'series',
      dataIndex: 'series',
      checked: true,
      width: 100,
    },
    {
      title: '流量更新',
      key: 'flowRefreshTime',
      dataIndex: 'flowRefreshTime',
      checked: true,
      width: 200,
    },
    {
      title: '状态更新',
      key: 'stateRefreshTime',
      dataIndex: 'stateRefreshTime',
      checked: true,
      width: 200,
    },
    {
      title: '实名更新',
      key: 'realNameRefreshTime',
      dataIndex: 'realNameRefreshTime',
      checked: true,
      width: 200,
    },
    {
      title: '卡板备注',
      key: 'remarks',
      dataIndex: 'remarks',
      checked: true,
      width: 100,
    },
    {
      title: '操作',
      key: 'actions',
      fixed: 'right',
      dataIndex: 'actions',
      width: 180,
      align: 'left',
      checked: true,
    },
  ])
  //券包订单
  const tableColumns4: any = reactive({
    list: [
      {
        title: '券包名称',
        key: 'couponName',
        dataIndex: 'couponName',
        checked: true,
        width: 150,
      },
      {
        title: '支付金额',
        key: 'paymentAmount',
        dataIndex: 'paymentAmount',
        checked: true,
        width: 100,
      },

      {
        title: '券包数量',
        key: 'couponCount',
        dataIndex: 'couponCount',
        checked: true,
        width: 100,
      },
      {
        title: '券包金额',
        key: 'couponAmount',
        dataIndex: 'couponAmount',
        checked: true,
        width: 100,
      },
      {
        title: '订单状态',
        key: 'state',
        dataIndex: 'state',
        checked: true,
        width: 100,
      },
      {
        title: '充值时间',
        key: 'addTime',
        dataIndex: 'addTime',
        checked: true,
        width: 190,
      },
      {
        title: '过期时间',
        key: 'endTime',
        dataIndex: 'endTime',
        checked: true,
        width: 190,
      },
      {
        title: '首次使用',
        key: 'addUseTime',
        dataIndex: 'addUseTime',
        checked: true,
        width: 190,
      },
      {
        title: '最近使用',
        key: 'endUseTime',
        dataIndex: 'endUseTime',
        checked: true,
        width: 190,
      },
      {
        title: '退款时间',
        key: 'refundTime',
        dataIndex: 'refundTime',
        checked: true,
        width: 190,
      },
      {
        title: '退款备注',
        key: 'refundRemarks',
        dataIndex: 'refundRemarks',
        checked: true,
        width: 220,
      },
    ],
  })
  const couponOrderList = ref([])
  const loading10 = ref(false)
  //券包订单列表
  function couponOrderdoRefresh(value?: number) {
    // eslint-disable-next-line prettier/prettier
    loading10.value = true
    tables.tableLoading = true
    if (value) {
      paginationCoupon.page = value
    }
    formpost({
      url: ordercoupon,
      data: {
        page: paginationCoupon.page,
        size: paginationCoupon.pageSize,
        card: detail.value.card,
      },
    })
      .then((res) => {
        res.data.list.forEach((item: any) => {
          if (item.seriesCouponOrderInfoList) {
            item.num = 0
            item.nums = 0
            item.seriesCouponOrderInfoList.forEach((items: any) => {
              if (items.state == 0) {
                item.num++
              } else {
                item.nums++
              }
            })
          }
        })
        // tables.tableLoading = false
        couponOrderList.value = res.data.list
        paginationCoupon.setTotalSize((res.data as any).totalSize)
        loading10.value = false
      })
      .catch(() => {
        loading10.value = false
        // tables.tableLoading = false
      })
  }
  //会员订单
  const tableColumns5: any = reactive({
    list: [
      {
        title: '会员名称',
        key: 'vipName',
        dataIndex: 'vipName',
        checked: true,
        width: 100,
      },
      {
        title: '充值金额',
        key: 'paymentAmount',
        dataIndex: 'paymentAmount',
        checked: true,
        width: 100,
      },
      {
        title: '会员时间',
        key: 'couponCount',
        dataIndex: 'couponCount',
        checked: true,
        width: 100,
      },
      {
        title: '订单状态',
        key: 'state',
        dataIndex: 'state',
        checked: true,
        width: 100,
      },
      {
        title: '充值时间',
        key: 'payTime',
        dataIndex: 'payTime',
        checked: true,
        width: 190,
      },
      {
        title: '开始时间',
        key: 'addTime',
        dataIndex: 'addTime',
        checked: true,
        width: 190,
      },
      {
        title: '过期时间',
        key: 'endTime',
        dataIndex: 'endTime',
        checked: true,
        width: 190,
      },
      {
        title: '退款时间',
        key: 'refundTime',
        dataIndex: 'refundTime',
        checked: true,
        width: 190,
      },
      {
        title: '退款备注',
        key: 'refundRemarks',
        dataIndex: 'refundRemarks',
        checked: true,
        width: 220,
      },
    ],
  })
  const stateVisiblekl = ref(false)
  const vipOrderList = ref([])
  const paginationVip = usePagination(vipOrderdoRefresh)
  //会员订单列表
  function vipOrderdoRefresh(value?: number) {
    // eslint-disable-next-line prettier/prettier

    stateVisiblekl.value = true
    if (value) {
      paginationVip.page = value
    }

    formpost({
      url: speedOrderList,
      data: {
        page: paginationVip.page,
        size: paginationVip.pageSize,
        card: detail.value.card,
      },
    })
      .then((res) => {
        stateVisiblekl.value = false
        vipOrderList.value = res.data.list
        paginationVip.setTotalSize((res.data as any).totalSize)
      })
      .catch(() => {
        stateVisiblekl.value = false
      })
  }
  const rebateLists5 = ref([])
  function doRefreshOperate5(value?: any) {
    load2.value = true
    if (value) {
      pagination5.page = value
    }
    http
      .formpost({
        url: rechargeCardList,
        data: () => {
          return {
            page: pagination5.page,
            size: pagination5.pageSize,
            card: detail.value.card,
          }
        },
      })
      .then((res) => {
        load2.value = false
        rebateLists5.value = res.data.list
        pagination5.setTotalSize((res.data as any).totalSize)
      })
      .catch(() => {
        load2.value = false
      })
  }

  const rowKey = useRowKey('id')
  const visible = ref(false)
  const visibleEdit = ref(false)
  const huakavisible = ref(false)
  const jiancevisible = ref(false)
  const cardsVisible = ref(false)
  const correctVisible = ref(false)
  const correctRef = ref()
  const parameterVisible = ref(false)
  const retrieveVisible = ref(false)
  const deleteVisible = ref(false)
  const cancelVisible = ref(false)
  const detailVisible = ref(false)
  const passWordVisible = ref(false)
  const balanceVisible = ref(false)
  const balanceRef = ref()
  const mealVisible = ref(false)
  const mealRef = ref()
  const cancelRef = ref()
  const passWordRef = ref()
  const disabled = ref(false)
  const jieguo = ref(false)
  const error = ref(false)
  const errorValue = ref('')
  const huakaForms = ref<typeof Form>()
  const parameterForms = ref<typeof Form>()
  const retrieveForms = ref<typeof Form>()
  const deleteForms = ref<typeof Form>()
  const checked1: any = ref('orderly')
  const jianceForm: any = ref({
    repeats: [],
    notExists: [],
  })
  const realNameForm: any = ref({})
  const detail: any = ref({
    series: { name: '系列名字', channel: { name: '测试1' } },
    stateName: { name: '系列名字', color: '' },
    exceptionForm: {},
  })
  const channel: any = ref([])
  const series: any = ref([])
  // const cancelType: any = ref([])
  const cancelMold: any = ref([])
  const card: any = ref('')
  const cards: any = ref('')
  const names: any = ref('')
  const type = ref('cards')
  const loadings: any = ref(false)
  const loadinges: any = ref(false)
  const loading1: any = ref(false)

  const scroll = {
    x: 1800,
  }
  const correctForm = ref({
    id: '',
    card: '',
    iccid: '',
    apiCard: '',
    realNameCard: '',
    imei: '',
    imsi: '',
  })
  const huakaForm: any = reactive({
    addCard: '',
    endCard: '',
    remarks: '',
    userId: '',
    cardMultiline: '',
  })

  const cancelForm: any = reactive({
    cardMultiline: '',
    cancellationGroupId: '',
  })

  const balanceForm: any = reactive({
    id: '',
    balance: '',
    type: 0,
    remark: '',
    balance1: '',
  })

  const mealForm: any = reactive({
    cardId: '',
    next: 0,
    setMealId: '',
    upstream: 1,
    remarks: '',
  })

  const passWordForm: any = reactive({
    id: '',
    passWord: '',
  })

  const parameterForm: any = reactive({
    addCard: '',
    endCard: '',
    remarks: '',
    seriesId: '',
    cardMultiline: '',
  })

  const retrieveForm: any = reactive({
    addCard: '',
    endCard: '',
    remarks: '',
    direct: 1,
    userId: '',
    cardMultiline: '',
  })

  const deleteForm: any = reactive({
    addCard: '',
    endCard: '',
    remarks: '',
    cardMultiline: '',
  })

  const remarkForm: any = reactive({
    addCard: '',
    endCard: '',
    remarks: '',
    cardMultiline: '',
    cover: true,
  })

  const form = reactive({
    addPayNumber: '',
    endPayNumber: '',
    addId: '',
    endId: '',
    channelIds: '',
    seriesIds: '',
    operator: '',
    addCard: '',
    endCard: '',
    direct: '',
    systemRealName: '',
    userIds: '',
    states: '', //卡板状态 -1未知 0正常 1库存 2待激活 3已激活 4已停机
    officialRealName: '', //	官方实名 -1未知 0未实名 1已实名
    pay: '',
    speedLimit: '',
    addCreateTime: '',
    endCreateTime: '',
    addFlowRefreshTime: '',
    endFlowRefreshTime: '',
    cards: '',
    cancellation: '',
    change: '',
    ids: '',
    addBalance: '', //      开始余额
    endBalance: '', //      结束余额
    addUsed: '', //    开始已用
    endUsed: '', //      结束已用
    addFree: '', //      开始剩余
    endFree: '', //      结束剩余
    addUpstreamFlow: '', //      开始上游用量
    endUpstreamFlow: '', //      结束上游用量
    flowRefreshTime: '', //   流量刷新时间 当为0时表示未刷新过 小于0时超出X小时未刷新 大于0时X小时内刷新过
    stateRefreshTime: '', //   状态刷新时间 当为0时表示未刷新过 小于0时超出X小时未刷新 大于0时X小时内刷新过
    realNameRefreshTime: '', //  实名刷新时间 当为0时表示未刷新过 小于0时超出X小时未刷新 大于0时X小时内刷新过
    sort: '',
    asc: '',
    exceptionType: '',
  })

  const subFormEdit = ref({
    userName: '', //用户名
    profit: '', //分润比例
    api: false, //是否有调用接口权限
    batchRecharge: false, //是否有批量充值权限
    collection: false, //是否有自收款权限
    cardLogin: true, //是否有充值前端登录权限
    cardOperation: true, //是否有卡操作权限(停机, 复机)
    customSetRealName: true, //是否有套餐名称修改权限
    customLogo: true, //是否有自定义logo权限
  })

  const userList: any = ref([])
  const tableColumns: any = reactive({
    neme: 'CARD',
    list: [],
    nsma: [],
  })
  const cardLists = ref('')
  const state = ref([
    {
      id: 1,
      name: '全部卡板',
      img: '',
      number: 20000,
      introduce: '产生过订单的卡板',
    },
    {
      id: 2,
      name: '活跃卡板',
      img: '',
      number: 20000,
      introduce: '最近30天产生过订单的卡板',
    },
    {
      id: 3,
      name: '新增卡板',
      img: '',
      number: 10000,
      introduce: '最近30天新增并且产生订单记录的卡板',
    },
    {
      id: 4,
      name: '余额卡板',
      img: '',
      number: 10000,
      introduce: '近30天充值过余额的卡板',
    },
    {
      id: 5,
      name: '流失卡板',
      img: '',
      number: 10000,
      introduce: '近90天产生过订单的卡板',
    },
  ])

  const batchRef = ref()
  const batchRef1 = ref()
  const batchRef2 = ref()
  const batchRef4 = ref()
  const batchList: any = ref([])
  const zong = ref({
    success: 0,
    error: 0,
  })
  const batchJian = ref()
  const list = ref([])
  const intervalId = ref()
  const count = ref(0)
  const set: any = ref({})
  const errorList: any = ref([])
  const batchValue = ref('')
  const nameBatch = ref('刷新')
  const activeBatch = ref('1')
  const batchMealList = ref([{ seriesCouponList: [] }])
  const forgotNext = () => {
    stepCurrent.value = Math.min(3, stepCurrent.value + 1)
  }

  function stepsClose() {
    stepCurrent.value = 1
    errorValue.value = ''
    error.value = false
    loadings.value = false
    stepVisible.value = false
  }
  //切换
  function setCurrent(current) {
    stepCurrent.value = current
  }
  //计算停机阈值
  function flowUsedFn(val1?: any, val2?: any, val3?: any, val4?: any) {
    if (val1 == undefined && val2 == undefined) {
      return false
    } else {
      if (val2 == 0) {
      }
    }
  }
  function closeBatch() {
    clearInterval(intervalId.value)
    batchList.value = []
    batchShow.value = false
  }
  const erShow = ref(false)
  //一卡一码
  const oneCodeForm = ref({
    addCard: '',
    endCard: '',
    planId: '',
    selectType: 0,
    cardMultiline: '',
  })
  const urlsa = ref('')
  const imgUrl = ref('')
  function openOneCodeEr(val: any) {
    get({
      url: oneCodeBang,
      data: () => {
        return {
          cardId: val.id,
        }
      },
    })
      .then((res) => {
        if (res.code == 0) {
          urlsa.value =
            window.location.protocol +
            '//' +
            window.location.host +
            '/wap/pages/index/cardLink?card=' +
            val.card
          imgUrl.value =
            window.location.protocol +
            '//' +
            window.location.host +
            qr +
            '?content=' +
            encodeURIComponent(
              window.location.protocol +
                '//' +
                window.location.host +
                '/wap/pages/index/cardLink?card=' +
                val.card
            )
          erShow.value = true
        }
      })
      .catch(console.log)
  }
  const oneCodeRef = ref()
  const oneCodeList = ref([])
  function openOneCard() {
    useCommon.oneCodeNameFn().then((res) => {
      oneCodeList.value = res.data
    })
    checked1.value = 'orderly'
    oneCodeShow.value = true
  }
  function openPara() {
    parameterVisible.value = true
    useCommon.seriess().then((res: any) => {
      seriesA.value = res.data
    })
  }
  //下载图片
  function downloadIamge(imgsrc: any, name: any) {
    //下载图片地址和图片名
    var image = new Image()
    // 解决跨域 Canvas 污染问题
    image.setAttribute('crossOrigin', 'anonymous')
    image.onload = function () {
      var canvas = document.createElement('canvas')
      canvas.width = image.width
      canvas.height = image.height
      var context = canvas.getContext('2d')
      context.drawImage(image, 0, 0, image.width, image.height)
      var url = canvas.toDataURL('image/png') //得到图片的base64编码数据
      var a = document.createElement('a') // 生成一个a元素
      var event = new MouseEvent('click') // 创建一个单击事件
      a.download = name || 'photo' // 设置图片名称
      a.href = url // 将生成的URL设置为a.href属性
      a.dispatchEvent(event) // 触发a的单击事件
    }
    image.src = imgsrc
  }
  // 改downs这个函数就行，downloadIamge（‘图片下载地址’，图片名字）
  function downs() {
    // 主要是为了名字不重复
    var name = new Date().getTime()
    downloadIamge(imgUrl.value, name)
  }
  //关闭一卡一码
  function oneCodeClose() {
    oneCodeRef.value.resetFields()
    oneCodeShow.value = false
  }
  function oneCodeJian() {
    oneCodeRef.value?.validate().then((error: any) => {
      if (!error) {
        if (checked1.value == 'seach') {
          formpost({
            url: getCardId,
            data: () => {
              return {
                ...form,
                userIds: form.userIds.toString(),
                states: form.states.toString(),
                channelIds: form.channelIds.toString(),
                seriesIds: form.seriesIds.toString(),
              }
            },
          })
            .then((res) => {
              if (res.code == 0) {
                const card: any = []
                res.data.forEach((element: any) => {
                  card.push(element.card)
                })
                cardLists.value = card.join('\n')
                oneCodeOne(card.join('\n'))
              }
            })
            .catch(console.log)
        } else {
          if (checked1.value == 'orderly') {
            oneCodeForm.value.selectType = 0
          } else {
            oneCodeForm.value.selectType = 1
          }
          http
            .post({
              url: oneCodeDetection + '?planId=' + oneCodeForm.value.planId,
              data: () => {
                return {
                  ...oneCodeForm.value,
                }
              },
            })
            .then((res) => {
              if (res.code == 0) {
                loadings.value = false
                names.value = '一卡一码绑定'
                jianceForm.value = {
                  total: res.data,
                  success: res.data,
                  error: 0,
                }
                if (res.data >= 1000) {
                  console.log('进来了')
                  jieguo.value = true
                } else {
                  jieguo.value = true
                }
              }
            })
            .catch(() => {
              loadings.value = false
            })
        }
      }
    })
  }
  function oneCodeOne(val: any) {
    if (checked1.value == 'orderly') {
      oneCodeForm.value.selectType = 0
    } else {
      oneCodeForm.value.selectType = 1
    }
    http
      .post({
        url: oneCodeDetection + '?planId=' + oneCodeForm.value.planId,
        data: () => {
          return {
            ...oneCodeForm.value,
            cardMultiline: val,
          }
        },
      })
      .then((res) => {
        if (res.code == 0) {
          loadings.value = false
          names.value = '一卡一码绑定'
          jianceForm.value = {
            total: res.data,
            success: res.data,
            error: 0,
          }
          if (res.data >= 1000) {
            console.log('进来了')
            jieguo.value = true
          } else {
            jieguo.value = true
          }
        }
      })
      .catch(() => {
        loadings.value = false
      })
  }
  function oneCodeJie() {
    if (checked1.value == 'orderly') {
      oneCodeForm.value.selectType = 0
    } else {
      oneCodeForm.value.selectType = 1
    }

    http
      .post({
        url: oneCodeBind + '?planId=' + oneCodeForm.value.planId,
        data: () => {
          return {
            ...oneCodeForm.value,
            cardMultiline:
              checked1.value == 'seach' ? cardLists.value : oneCodeForm.value.cardMultiline,
          }
        },
      })
      .then((res) => {
        if (res.code == 0) {
          names.value = '一卡一码绑定'
          errorValue.value = ''
          jiancevisible.value = true
          loadings.value = false
          jieguo.value = false
          oneCodeRef.value.resetFields()
          doRefresh(1)
        }
      })
      .catch(() => {
        loadings.value = false
      })
  }
  const vipList: any = ref([])
  function tabclicks(val: any) {
    batchMealList.value = [{ seriesCouponList: [] }]
    if (val == '1') {
      nameBatch.value = '刷新'
    } else if (val == '2') {
      nameBatch.value = '停机复机'
    } else if (val == '3') {
      nameBatch.value = '删除实名'
    } else if (val == '4') {
      nameBatch.value = '余额操作'
    } else if (val == '6') {
      handleCancelRemark()
    } else if (val == '7') {
      useCommon.oneCodeNameFn().then((res) => {
        oneCodeList.value = res.data
      })
      checked1.value = 'orderly'
      oneCodeClose()
    } else if (val == '8') {
      nameBatch.value = '充值券包'
    } else if (val == '9') {
      nameBatch.value = '清除数据'
    } else if (val == '11') {
      nameBatch.value = '充值会员'
    } else {
      nameBatch.value = '充值套餐'
      useCommon.mealListFn().then((res) => {
        batchMealList.value = res.data
      })
    }
    batchForm.value = {
      addCard: '',
      endCard: '',
      time: 3,
      type: 0,
      cardMultiline: '',
      balance: 0,
      setMealId: '',
      next: 0,
      upstream: 1,
      remarks: '',
    }
    batchChecked.value = 'orderly'
    batchList.value = []
    clearInterval(intervalId.value)
    console.log(nameBatch.value)
  }
  const batchRef5 = ref()
  function cardVip() {
    batchRef4.value?.validate().then((error: any) => {
      if (!error) {
        batchList.value = []
        batchValue.value = ''
        count.value = 0
        zong.value = {
          success: 0,
          error: 0,
        }
        errorList.value = []
        clearInterval(intervalId.value)
        set.value = JSON.parse(JSON.stringify(batchForm.value))
        if (batchChecked.value == 'seach') {
          console.log(batchChecked.value)
          formpost({
            url: getCardId,
            data: () => {
              return {
                ...form,
                userIds: form.userIds.toString(),
                states: form.states.toString(),
                channelIds: form.channelIds.toString(),
                seriesIds: form.seriesIds.toString(),
              }
            },
          })
            .then((res) => {
              if (res.code == 0) {
                if (res.data.length > 1000) {
                  list.value = res.data
                  batchJian.value = true
                } else if (res.data.length > 0) {
                  list.value = res.data
                  batchJian.value = true
                } else {
                  Message.error('无可操作的卡')
                }
              }
            })
            .catch(console.log)
        } else if (batchChecked.value == 'orderly') {
          formpost({
            url: getCardId,
            data: () => {
              return {
                addCard: batchForm.value.addCard,
                endCard: batchForm.value.endCard,
              }
            },
          })
            .then((res) => {
              if (res.code == 0) {
                if (res.data.length > 1000) {
                  list.value = res.data
                  batchJian.value = true
                } else if (res.data.length > 0) {
                  list.value = res.data
                  batchJian.value = true
                } else {
                  Message.error('无可操作的卡')
                }
              }
            })
            .catch(console.log)
        } else if (batchChecked.value == 'disOrder') {
          formpost({
            url: getCardId,
            data: () => {
              return {
                cards: batchForm.value.cardMultiline.split(/\n/g).join(','),
              }
            },
          })
            .then((res) => {
              if (res.code == 0) {
                if (res.data.length > 1000) {
                  list.value = res.data
                  batchJian.value = true
                } else if (res.data.length > 0) {
                  list.value = res.data
                  batchJian.value = true
                } else {
                  Message.error('无可操作的卡')
                }
              }
            })
            .catch(console.log)
        }
      }
    })
  }
  //卡板回收
  function retrieveFn() {
    getList()
    retrieveVisible.value = true
  }
  function requestApi(item: any, card: any) {
    // 这里放置你的请求代码，item是列表中的元素
    fetch(item)
      .then((response) => response.json())
      .then((res) => {
        if (res.status == true) {
          zong.value.success++
        } else {
          zong.value.error++
        }
        errorList.value.unshift(card + ':' + res.msg)
        count.value++ // 增加计数器

        if (count.value < batchList.value.length && batchShow.value == true) {
          // 请求接口
          if (nameBatch.value == '刷新') {
            requestApi(
              `/app/card/refresh?id=${batchList.value[count.value].id}&type=${
                set.value.type == 3 ? '' : set.value.type
              }`,
              batchList.value[count.value].card
            )
          } else if (nameBatch.value == '清除数据') {
            const params1 = qs.stringify(set.value, { arrayFormat: 'repeat' })
            requestApi(
              `/app/user/card/clear/time?id=${batchList.value[count.value].id}&${params1}`,
              batchList.value[count.value].card
            )
          } else if (nameBatch.value == '停机复机') {
            if (set.value.type == 0) {
              requestApi(
                `/app/card/stop?id=${batchList.value[count.value].id}`,
                batchList.value[count.value].card
              )
            } else {
              requestApi(
                `/app/card/start?id=${batchList.value[count.value].id}`,
                batchList.value[count.value].card
              )
            }
          } else if (nameBatch.value == '删除实名') {
            if (set.value.type == 0) {
              requestApi(
                `/app/card/real/name/clear?id=${batchList.value[count.value].id}`,
                batchList.value[count.value].card
              )
            } else {
              requestApi(
                `/app/card/delete/real/name?id=${batchList.value[count.value].id}`,
                batchList.value[count.value].card
              )
            }
          } else if (nameBatch.value == '充值券包') {
            requestApi(
              `/app/coupon/order/batch/add?cardId=${batchList.value[count.value].id}&couponId=${
                set.value.setMealId
              }&seriesId=${batchList.value[count.value].seriesId}`,
              batchList.value[count.value].card
            )
          } else if (nameBatch.value == '充值会员') {
            requestApi(
              `/app/speed/vip/order/batch/pay?cardId=${
                batchList.value[count.value].id
              }&speedVipId=${set.value.setMealId}&seriesId=${
                batchList.value[count.value].seriesId
              }`,
              batchList.value[count.value].card
            )
          }
        } else {
        }
      })
      .catch((error) => {
        count.value++ // 增加计数器
        console.log('Error:', error)
        if (count.value <= batchList.value.length && batchShow.value == true) {
          // 请求接口
          if (nameBatch.value == '刷新') {
            requestApi(
              `/app/card/refresh?id=${batchList.value[count.value].id}&type=${
                set.value.type == 3 ? '' : set.value.type
              }`,
              batchList.value[count.value].card
            )
          } else if (nameBatch.value == '清除数据') {
            const params1 = qs.stringify(set.value, { arrayFormat: 'repeat' })
            requestApi(
              `/app/user/card/clear/time?id=${batchList.value[count.value].id}&${params1}`,
              batchList.value[count.value].card
            )
          } else if (nameBatch.value == '停机复机') {
            if (set.value.type == 0) {
              requestApi(
                `/app/card/stop?id=${batchList.value[count.value].id}`,
                batchList.value[count.value].card
              )
            } else {
              requestApi(
                `/app/card/start?id=${batchList.value[count.value].id}`,
                batchList.value[count.value].card
              )
            }
          } else if (nameBatch.value == '删除实名') {
            if (set.value.type == 0) {
              requestApi(
                `/app/card/real/name/clear?cardId=${batchList.value[count.value].id}`,
                batchList.value[count.value].card
              )
            } else {
              requestApi(
                `/app/card/delete/real/name?id=${batchList.value[count.value].id}`,
                batchList.value[count.value].card
              )
            }
          } else if (nameBatch.value == '充值券包') {
            requestApi(
              `/app/coupon/order/batch/add?cardId=${batchList.value[count.value].id}&couponId=${
                set.value.setMealId
              }&seriesId=${batchList.value[count.value].seriesId}`,
              batchList.value[count.value].card
            )
          }
        } else {
        }
      })
  }

  function requestApis(item: any, card: any) {
    // 这里放置你的请求代码，item是列表中的元素
    const formData = new FormData()
    formData.append('remarks', set.value.remarks)
    formData.append('upstream', set.value.upstream)
    formData.append('setMealId', set.value.setMealId)
    formData.append('next', set.value.next)
    formData.append('cardId', set.value.cardId)
    fetch(item, {
      method: 'POST',
      body: formData,
    })
      .then((response) => response.json())
      .then((res) => {
        if (res.status == true) {
          zong.value.success++
        } else {
          zong.value.error++
        }
        errorList.value.unshift(card + ':' + (res.status == true ? res.data.outTradeNo : res.msg))
        count.value++ // 增加计数器

        if (count.value < batchList.value.length && batchShow.value == true) {
          set.value.cardId = batchList.value[count.value].id
          requestApis(`/app/order/pay`, batchList.value[count.value].card)
        }
      })
      .catch((error) => {
        count.value++ // 增加计数器
        console.log('Error:', error)
        if (count.value < batchList.value.length && batchShow.value == true) {
          set.value.cardId = batchList.value[count.value].id
          requestApis(`/app/order/pay`, batchList.value[count.value].card)
        }
      })
  }

  function batchQue() {
    if (list.value.length > 1000) {
      if (batchValue.value == '确认操作') {
        batchList.value = list.value

        // 请求接口
        if (nameBatch.value == '刷新') {
          requestApi(
            `/app/card/refresh?id=${batchList.value[count.value].id}&type=${
              set.value.type == 3 ? '' : set.value.type
            }`,
            batchList.value[count.value].card
          )
        } else if (nameBatch.value == '清除数据') {
          const params1 = qs.stringify(set.value, { arrayFormat: 'repeat' })
          requestApi(
            `/app/user/card/clear/time?id=${batchList.value[count.value].id}&${params1}`,
            batchList.value[count.value].card
          )
        } else if (nameBatch.value == '停机复机') {
          if (set.value.type == 0) {
            requestApi(
              `/app/card/stop?id=${batchList.value[count.value].id}`,
              batchList.value[count.value].card
            )
          } else {
            requestApi(
              `/app/card/start?id=${batchList.value[count.value].id}`,
              batchList.value[count.value].card
            )
          }
        } else if (nameBatch.value == '删除实名') {
          requestApi(
            `/app/card/refresh?cardId=${batchList.value[count.value].id}&type=${
              set.value.type == 3 ? '' : set.value.type
            }`,
            batchList.value[count.value].card
          )
        } else if (nameBatch.value == '充值套餐') {
          set.value.cardId = batchList.value[count.value].id
          requestApis(`/app/order/pay`, batchList.value[count.value].card)
        } else if (nameBatch.value == '充值会员') {
          set.value.cardId = batchList.value[count.value].id
          requestApi(
            `/app/speed/vip/order/batch/pay?cardId=${batchList.value[count.value].id}&speedVipId=${
              set.value.setMealId
            }&seriesId=${batchList.value[count.value].seriesId}`,
            batchList.value[count.value].card
          )
        } else if (nameBatch.value == '充值券包') {
          requestApi(
            `/app/coupon/order/batch/add?cardId=${batchList.value[count.value].id}&couponId=${
              set.value.setMealId
            }&seriesId=${batchList.value[count.value].seriesId}`,
            batchList.value[count.value].card
          )
        }

        batchJian.value = false
      } else {
        Message.error('请先确认操作')
      }
    } else {
      batchList.value = list.value

      // 请求接口
      if (nameBatch.value == '刷新') {
        requestApi(
          `/app/card/refresh?id=${batchList.value[count.value].id}&type=${
            set.value.type == 3 ? '' : set.value.type
          }`,
          batchList.value[count.value].card
        )
      } else if (nameBatch.value == '清除数据') {
        const params1 = qs.stringify(set.value, { arrayFormat: 'repeat' })
        requestApi(
          `/app/user/card/clear/time?id=${batchList.value[count.value].id}&${params1}`,
          batchList.value[count.value].card
        )
      } else if (nameBatch.value == '停机复机') {
        if (set.value.type == 0) {
          requestApi(
            `/app/card/stop?id=${batchList.value[count.value].id}`,
            batchList.value[count.value].card
          )
        } else {
          requestApi(
            `/app/card/start?id=${batchList.value[count.value].id}`,
            batchList.value[count.value].card
          )
        }
      } else if (nameBatch.value == '删除实名') {
        if (set.value.type == 0) {
          requestApi(
            `/app/card/real/name/clear?cardId=${batchList.value[count.value].id}`,
            batchList.value[count.value].card
          )
        } else {
          requestApi(
            `/app/card/delete/real/name?id=${batchList.value[count.value].id}`,
            batchList.value[count.value].card
          )
        }
      } else if (nameBatch.value == '充值套餐') {
        set.value.cardId = batchList.value[count.value].id
        requestApis(`/app/order/pay`, batchList.value[count.value].card)
      } else if (nameBatch.value == '充值会员') {
        set.value.cardId = batchList.value[count.value].id
        requestApi(
          `/app/speed/vip/order/batch/pay?cardId=${batchList.value[count.value].id}&speedVipId=${
            set.value.setMealId
          }&seriesId=${batchList.value[count.value].seriesId}`,
          batchList.value[count.value].card
        )
      } else if (nameBatch.value == '充值券包') {
        requestApi(
          `/app/coupon/order/batch/add?cardId=${batchList.value[count.value].id}&couponId=${
            set.value.setMealId
          }&seriesId=${batchList.value[count.value].seriesId}`,
          batchList.value[count.value].card
        )
      }

      batchJian.value = false
    }
  }

  function batchShowFn() {
    batchForm.value = {
      addCard: '',
      endCard: '',
      time: 3,
      type: 0,
      cardMultiline: '',
      balance: 0,
      setMealId: '',
      next: 0,
      upstream: 1,
      remarks: '',
    }
    lis.value = false
    batchList.value = []
    activeBatch.value = '1'
    nameBatch.value = '刷新'
    batchShow.value = true
  }

  //刷新
  function batchRefFn() {
    console.log(batchChecked.value)
    batchRef.value?.validate().then((error: any) => {
      if (!error) {
        batchList.value = []
        batchValue.value = ''
        count.value = 0
        zong.value = {
          success: 0,
          error: 0,
        }
        errorList.value = []
        clearInterval(intervalId.value)
        set.value = JSON.parse(JSON.stringify(batchForm.value))
        if (batchChecked.value == 'seach') {
          console.log(batchChecked.value)
          formpost({
            url: getCardId,
            data: () => {
              return {
                ...form,
                userIds: form.userIds.toString(),
                states: form.states.toString(),
                channelIds: form.channelIds.toString(),
                seriesIds: form.seriesIds.toString(),
              }
            },
          })
            .then((res) => {
              if (res.code == 0) {
                if (res.data.length > 1000) {
                  list.value = res.data
                  batchJian.value = true
                } else if (res.data.length > 0) {
                  list.value = res.data
                  batchJian.value = true
                } else {
                  Message.error('无可操作的卡')
                }
              }
            })
            .catch(console.log)
        } else if (batchChecked.value == 'orderly') {
          formpost({
            url: getCardId,
            data: () => {
              return {
                addCard: batchForm.value.addCard,
                endCard: batchForm.value.endCard,
              }
            },
          })
            .then((res) => {
              if (res.code == 0) {
                if (res.data.length > 1000) {
                  list.value = res.data
                  batchJian.value = true
                } else if (res.data.length > 0) {
                  list.value = res.data
                  batchJian.value = true
                } else {
                  Message.error('无可操作的卡')
                }
              }
            })
            .catch(console.log)
        } else if (batchChecked.value == 'disOrder') {
          formpost({
            url: getCardId,
            data: () => {
              return {
                cards: batchForm.value.cardMultiline.split(/\n/g).join(','),
              }
            },
          })
            .then((res) => {
              if (res.code == 0) {
                if (res.data.length > 1000) {
                  list.value = res.data
                  batchJian.value = true
                } else if (res.data.length > 0) {
                  list.value = res.data
                  batchJian.value = true
                } else {
                  Message.error('无可操作的卡')
                }
              }
            })
            .catch(console.log)
        }
      }
    })
  }
  // 停机复机
  function batchRefFn1() {
    console.log(batchChecked.value)
    batchRef1.value?.validate().then((error: any) => {
      if (!error) {
        batchList.value = []
        batchValue.value = ''
        count.value = 0
        zong.value = {
          success: 0,
          error: 0,
        }
        errorList.value = []
        clearInterval(intervalId.value)
        set.value = JSON.parse(JSON.stringify(batchForm.value))
        if (batchChecked.value == 'seach') {
          console.log(batchChecked.value)
          formpost({
            url: getCardId,
            data: () => {
              return {
                ...form,
                userIds: form.userIds.toString(),
                states: form.states.toString(),
                channelIds: form.channelIds.toString(),
                seriesIds: form.seriesIds.toString(),
              }
            },
          })
            .then((res) => {
              if (res.code == 0) {
                if (res.data.length > 1000) {
                  list.value = res.data
                  batchJian.value = true
                } else if (res.data.length > 0) {
                  list.value = res.data
                  batchJian.value = true
                } else {
                  Message.error('无可操作的卡')
                }
              }
            })
            .catch(console.log)
        } else if (batchChecked.value == 'orderly') {
          formpost({
            url: getCardId,
            data: () => {
              return {
                addCard: batchForm.value.addCard,
                endCard: batchForm.value.endCard,
              }
            },
          })
            .then((res) => {
              if (res.code == 0) {
                if (res.data.length > 1000) {
                  list.value = res.data
                  batchJian.value = true
                } else if (res.data.length > 0) {
                  list.value = res.data
                  batchJian.value = true
                } else {
                  Message.error('无可操作的卡')
                }
              }
            })
            .catch(console.log)
        } else if (batchChecked.value == 'disOrder') {
          formpost({
            url: getCardId,
            data: () => {
              return {
                cards: batchForm.value.cardMultiline.split(/\n/g).join(','),
              }
            },
          })
            .then((res) => {
              if (res.code == 0) {
                if (res.data.length > 1000) {
                  list.value = res.data
                  batchJian.value = true
                } else if (res.data.length > 0) {
                  list.value = res.data
                  batchJian.value = true
                } else {
                  Message.error('无可操作的卡')
                }
              }
            })
            .catch(console.log)
        }
      }
    })
  }

  // 实名
  function batchRefFn2() {
    console.log(batchChecked.value)
    batchRef2.value?.validate().then((error: any) => {
      if (!error) {
        batchList.value = []
        batchValue.value = ''
        count.value = 0
        zong.value = {
          success: 0,
          error: 0,
        }
        errorList.value = []
        clearInterval(intervalId.value)
        set.value = JSON.parse(JSON.stringify(batchForm.value))
        if (batchChecked.value == 'seach') {
          console.log(batchChecked.value)
          formpost({
            url: getCardId,
            data: () => {
              return {
                ...form,
                userIds: form.userIds.toString(),
                states: form.states.toString(),
                channelIds: form.channelIds.toString(),
                seriesIds: form.seriesIds.toString(),
              }
            },
          })
            .then((res) => {
              if (res.code == 0) {
                if (res.data.length > 1000) {
                  list.value = res.data
                  batchJian.value = true
                } else if (res.data.length > 0) {
                  list.value = res.data
                  batchJian.value = true
                } else {
                  Message.error('无可操作的卡')
                }
              }
            })
            .catch(console.log)
        } else if (batchChecked.value == 'orderly') {
          formpost({
            url: getCardId,
            data: () => {
              return {
                addCard: batchForm.value.addCard,
                endCard: batchForm.value.endCard,
              }
            },
          })
            .then((res) => {
              if (res.code == 0) {
                if (res.data.length > 1000) {
                  list.value = res.data
                  batchJian.value = true
                } else if (res.data.length > 0) {
                  list.value = res.data
                  batchJian.value = true
                } else {
                  Message.error('无可操作的卡')
                }
              }
            })
            .catch(console.log)
        } else if (batchChecked.value == 'disOrder') {
          formpost({
            url: getCardId,
            data: () => {
              return {
                cards: batchForm.value.cardMultiline.split(/\n/g).join(','),
              }
            },
          })
            .then((res) => {
              if (res.code == 0) {
                if (res.data.length > 1000) {
                  list.value = res.data
                  batchJian.value = true
                } else if (res.data.length > 0) {
                  list.value = res.data
                  batchJian.value = true
                } else {
                  Message.error('无可操作的卡')
                }
              }
            })
            .catch(console.log)
        }
      }
    })
  }

  const batchRef3 = ref()

  // 充值余额
  function batchRefFn3() {
    console.log(batchChecked.value)
    batchRef3.value?.validate().then((error: any) => {
      if (!error) {
        batchList.value = []
        batchValue.value = ''
        count.value = 0
        zong.value = {
          success: 0,
          error: 0,
        }
        errorList.value = []
        clearInterval(intervalId.value)
        set.value = JSON.parse(JSON.stringify(batchForm.value))
        loadings.value = true
        if (batchChecked.value == 'orderly') {
          post({
            url:
              youxuCardPay +
              '?type=' +
              batchForm.value.type +
              '&balance=' +
              batchForm.value.balance,
            data: () => {
              return {
                addCard: batchForm.value.addCard,
                endCard: batchForm.value.endCard,
              }
            },
          })
            .then((res) => {
              if (res.code == 0) {
                names.value = '充值余额'
                jianceForm.value = res.data
                jiancevisible.value = true
                console.log('sss')
                loadings.value = false
                batchRef3.value?.resetFields()
              }
            })
            .catch(() => {
              loadings.value = false
            })
        } else {
          if (batchChecked.value == 'seach') {
            formpost({
              url: getCardId,
              data: () => {
                return {
                  ...form,
                  userIds: form.userIds.toString(),
                  states: form.states.toString(),
                  channelIds: form.channelIds.toString(),
                  seriesIds: form.seriesIds.toString(),
                }
              },
            })
              .then((res) => {
                if (res.code == 0) {
                  const card = []
                  res.data.forEach((item) => {
                    card.push(item.card)
                  })
                  formpost({
                    url: balanceDisorder,
                    data: () => {
                      return {
                        type: batchForm.value.type,
                        balance: batchForm.value.balance,
                        cardMultiline: card.join('\n'),
                      }
                    },
                  })
                    .then((res) => {
                      if (res.code == 0) {
                        names.value = '充值余额'
                        jianceForm.value = res.data
                        jiancevisible.value = true
                        console.log('sss')
                        loadings.value = false
                        batchRef3.value?.resetFields()
                      }
                    })
                    .catch(() => {
                      loadings.value = false
                    })
                }
              })
              .catch(console.log)
          } else {
            formpost({
              url: balanceDisorder,
              data: () => {
                return {
                  type: batchForm.value.type,
                  balance: batchForm.value.balance,
                  cardMultiline: batchForm.value.cardMultiline,
                }
              },
            })
              .then((res) => {
                if (res.code == 0) {
                  names.value = '充值余额'
                  jianceForm.value = res.data
                  jiancevisible.value = true
                  console.log('sss')
                  loadings.value = false
                  batchRef3.value?.resetFields()
                }
              })
              .catch(() => {
                loadings.value = false
              })
          }
        }
      }
    })
  }

  //获取卡板系列
  function cardMealFna() {
    batchMealList.value = []
    batchForm.value.setMealId = ''
    formpost({
      url: getCardId,
      data: () => {
        return {
          ...form,
          userIds: form.userIds.toString(),
          states: form.states.toString(),
          channelIds: form.channelIds.toString(),
          seriesIds: form.seriesIds.toString(),
        }
      },
    })
      .then((res) => {
        if (res.code == 0) {
          if (res.data.length > 0) {
            if (nameBatch.value == '充值套餐') {
              get({
                url: mealLists,
                data: () => {
                  return {
                    seriesIds: res.data[0].seriesId,
                  }
                },
              }).then((res) => {
                if (res.code == 0) {
                  batchMealList.value = res.data
                }
              })
            } else if (nameBatch.value == '充值券包') {
              get({
                url: couponBy,
                data: () => {
                  return {
                    seriesId: res.data[0].seriesId,
                  }
                },
              }).then((res) => {
                if (res.code == 0) {
                  batchMealList.value = res.data[0].seriesCouponList
                }
              })
            } else if (nameBatch.value == '充值会员') {
              get({
                url: '/app/speed/vip/admin/get',
                data: () => {
                  return {
                    seriesId: res.data[0].seriesId,
                  }
                },
              }).then((res) => {
                if (res.code == 0) {
                  batchMealList.value = res.data
                }
              })
            }
          }
        }
      })
      .catch(console.log)
  }
  //获取卡板系列
  function cardMealFn() {
    batchMealList.value = []
    batchForm.value.setMealId = ''
    if (batchForm.value.addCard.length > 0) {
      get({
        url: byCard,
        data: () => {
          return {
            card: batchForm.value.addCard,
          }
        },
      })
        .then((res) => {
          if (res.code == 0) {
            console.log(res)
            if (nameBatch.value == '充值套餐') {
              get({
                url: mealLists,
                data: () => {
                  return {
                    seriesIds: res.data.seriesId,
                  }
                },
              }).then((res) => {
                if (res.code == 0) {
                  batchMealList.value = res.data
                }
              })
            } else if (nameBatch.value == '充值券包') {
              get({
                url: couponBy,
                data: () => {
                  return {
                    seriesId: res.data.seriesId,
                  }
                },
              }).then((res) => {
                if (res.code == 0) {
                  batchMealList.value = res.data[0].seriesCouponList
                }
              })
            } else if (nameBatch.value == '充值会员') {
              get({
                url: '/app/speed/vip/admin/get',
                data: () => {
                  return {
                    seriesId: res.data.seriesId,
                  }
                },
              }).then((res) => {
                if (res.code == 0) {
                  batchMealList.value = res.data
                }
              })
            }
          }
        })
        .catch(() => {})
    }
  }

  //获取卡板系列
  function cardMealFns() {
    batchForm.value.setMealId = ''
    let aap = batchForm.value.cardMultiline.split(/[(\r\n)\r\n]+/)
    batchMealList.value = []
    if (batchForm.value.cardMultiline.length > 0) {
      get({
        url: byCard,
        data: () => {
          return {
            card: aap[0],
          }
        },
      })
        .then((res) => {
          if (res.code == 0) {
            console.log(res)
            if (nameBatch.value == '充值套餐') {
              get({
                url: mealLists,
                data: () => {
                  return {
                    seriesIds: res.data.seriesId,
                  }
                },
              }).then((res) => {
                if (res.code == 0) {
                  batchMealList.value = res.data
                }
              })
            } else if (nameBatch.value == '充值券包') {
              get({
                url: couponBy,
                data: () => {
                  return {
                    seriesId: res.data.seriesId,
                  }
                },
              }).then((res) => {
                if (res.code == 0) {
                  batchMealList.value = res.data[0].seriesCouponList
                }
              })
            } else if (nameBatch.value == '充值会员') {
              get({
                url: '/app/speed/vip/admin/get',
                data: () => {
                  return {
                    seriesId: res.data.seriesId,
                  }
                },
              }).then((res) => {
                if (res.code == 0) {
                  batchMealList.value = res.data
                }
              })
            }
          }
        })
        .catch(() => {})
    }
  }
  function changeMeals(val: any) {
    batchMealList.value.forEach((item: any) => {
      console.log('进来了')
      if (item.id == val) {
        if (item.next) {
          lis.value = false
        } else {
          lis.value = true
        }
        batchForm.value.next = 0
      }
    })
  }

  // 充值券包
  function batchRefFn7() {
    batchRef4.value?.validate().then((error: any) => {
      if (!error) {
        batchList.value = []
        batchValue.value = ''
        count.value = 0
        zong.value = {
          success: 0,
          error: 0,
        }
        errorList.value = []
        clearInterval(intervalId.value)
        set.value = JSON.parse(JSON.stringify(batchForm.value))
        if (batchChecked.value == 'seach') {
          console.log(batchChecked.value)
          formpost({
            url: getCardId,
            data: () => {
              return {
                ...form,
                userIds: form.userIds.toString(),
                states: form.states.toString(),
                channelIds: form.channelIds.toString(),
                seriesIds: form.seriesIds.toString(),
              }
            },
          })
            .then((res) => {
              if (res.code == 0) {
                if (res.data.length > 1000) {
                  list.value = res.data
                  batchJian.value = true
                } else if (res.data.length > 0) {
                  list.value = res.data
                  batchJian.value = true
                } else {
                  Message.error('无可操作的卡')
                }
              }
            })
            .catch(console.log)
        } else if (batchChecked.value == 'orderly') {
          formpost({
            url: getCardId,
            data: () => {
              return {
                addCard: batchForm.value.addCard,
                endCard: batchForm.value.endCard,
              }
            },
          })
            .then((res) => {
              if (res.code == 0) {
                if (res.data.length > 1000) {
                  list.value = res.data
                  batchJian.value = true
                } else if (res.data.length > 0) {
                  list.value = res.data
                  batchJian.value = true
                } else {
                  Message.error('无可操作的卡')
                }
              }
            })
            .catch(console.log)
        } else if (batchChecked.value == 'disOrder') {
          formpost({
            url: getCardId,
            data: () => {
              return {
                cards: batchForm.value.cardMultiline.split(/\n/g).join(','),
              }
            },
          })
            .then((res) => {
              if (res.code == 0) {
                if (res.data.length > 1000) {
                  list.value = res.data
                  batchJian.value = true
                } else if (res.data.length > 0) {
                  list.value = res.data
                  batchJian.value = true
                } else {
                  Message.error('无可操作的卡')
                }
              }
            })
            .catch(console.log)
        }
      }
    })
  }

  // 充值套餐
  function batchRefFn4() {
    batchRef4.value?.validate().then((error: any) => {
      if (!error) {
        batchList.value = []
        batchValue.value = ''
        count.value = 0
        zong.value = {
          success: 0,
          error: 0,
        }
        errorList.value = []
        clearInterval(intervalId.value)
        set.value = JSON.parse(JSON.stringify(batchForm.value))
        if (batchChecked.value == 'seach') {
          console.log(batchChecked.value)
          formpost({
            url: getCardId,
            data: () => {
              return {
                ...form,
                userIds: form.userIds.toString(),
                states: form.states.toString(),
                channelIds: form.channelIds.toString(),
                seriesIds: form.seriesIds.toString(),
              }
            },
          })
            .then((res) => {
              if (res.code == 0) {
                if (res.data.length > 1000) {
                  list.value = res.data
                  batchJian.value = true
                } else if (res.data.length > 0) {
                  list.value = res.data
                  batchJian.value = true
                } else {
                  Message.error('无可操作的卡')
                }
              }
            })
            .catch(console.log)
        } else if (batchChecked.value == 'orderly') {
          formpost({
            url: getCardId,
            data: () => {
              return {
                addCard: batchForm.value.addCard,
                endCard: batchForm.value.endCard,
              }
            },
          })
            .then((res) => {
              if (res.code == 0) {
                if (res.data.length > 1000) {
                  list.value = res.data
                  batchJian.value = true
                } else if (res.data.length > 0) {
                  list.value = res.data
                  batchJian.value = true
                } else {
                  Message.error('无可操作的卡')
                }
              }
            })
            .catch(console.log)
        } else if (batchChecked.value == 'disOrder') {
          formpost({
            url: getCardId,
            data: () => {
              return {
                cards: batchForm.value.cardMultiline.split(/\n/g).join(','),
              }
            },
          })
            .then((res) => {
              if (res.code == 0) {
                if (res.data.length > 1000) {
                  list.value = res.data
                  batchJian.value = true
                } else if (res.data.length > 0) {
                  list.value = res.data
                  batchJian.value = true
                } else {
                  Message.error('无可操作的卡')
                }
              }
            })
            .catch(console.log)
        }
      }
    })
  }

  const remarkRef = ref()

  function openRemark() {
    remarkShow.value = true
  }

  function handleCancelRemark() {
    remarkC.value = 'orderly'
    remarkShow.value = false
  }

  const handleBeforeOkRemark = () => {
    remarkRef.value?.validate().then((error: any) => {
      if (!error) {
        Modal.warning({
          hideCancel: false,
          titleAlign: 'start',
          title: '确认修改',
          content: '确认修改此批卡备注？',
          onOk: () => {
            loadingRemark.value = true
            if (remarkC.value == 'orderly') {
              http
                .post({
                  url: cardRemarkOrderly + '?cover=' + remarkForm.cover,
                  data: () => {
                    return {
                      addCard: remarkForm.addCard,
                      endCard: remarkForm.endCard,
                      remarks: remarkForm.remarks,
                    }
                  },
                })
                .then((res) => {
                  if (res.code == 0) {
                    names.value = '备注'
                    remarkRef.value?.resetFields()
                    doRefresh()
                    loadingRemark.value = false
                    jianceForm.value = res.data
                    if (res.data.total >= 1000) {
                      jieguo.value = true
                    } else {
                      jieguo.value = true
                    }
                  }
                })
                .catch(() => {
                  loadingRemark.value = false
                })
            } else {
              if (remarkC.value == 'seach') {
                formpost({
                  url: getCardId,
                  data: () => {
                    return {
                      ...form,
                      userIds: form.userIds.toString(),
                      states: form.states.toString(),
                      channelIds: form.channelIds.toString(),
                      seriesIds: form.seriesIds.toString(),
                    }
                  },
                })
                  .then((res) => {
                    if (res.code == 0) {
                      const card: any = []
                      res.data.forEach((element: any) => {
                        card.push(element.card)
                      })
                      cardLists.value = card.join('\n')
                      remarksss(card.join('\n'))
                    }
                  })
                  .catch(console.log)
              } else {
                remarksss(remarkForm.cardMultiline)
              }
            }
          },
          onCancel: () => {},
        })
      }
    })
  }

  function remarksss(val: any) {
    http
      .formpost({
        url: cardRemarkDisorder,
        data: () => {
          return {
            remarks: remarkForm.remarks,
            cardMultiline: val,
            cover: remarkForm.cover,
          }
        },
      })
      .then((res) => {
        if (res.code == 0) {
          remarkRef.value?.resetFields()
          doRefresh()
          loadingRemark.value = false
          names.value = '备注'
          jianceForm.value = res.data
          if (res.data.total >= 1000) {
            console.log('进来了')
            jieguo.value = true
          } else {
            jieguo.value = true
          }
        }
      })
      .catch(() => {
        loadingRemark.value = false
      })
  }

  function delOrder(val: any) {
    Modal.warning({
      hideCancel: false,
      titleAlign: 'start',
      title: '确认删除',
      content: '确认删除此订单？',
      onOk: () => {
        get({
          url: deleteorder,
          data: () => {
            return {
              id: val.id,
            }
          },
        })
          .then((res) => {
            if (res.code == 0) {
              Message.success(res.msg)
              doRefreshOrder()
            }
          })
          .catch(console.log)
      },
      onCancel: () => {},
    })
  }

  function dateTime(val: any) {
    // 时间戳
    let timestamp = val + ''
    // 此处时间戳以毫秒为单位
    let GMT =
      timestamp.substring(0, 4) + '-' + timestamp.substring(4, 6) + '-' + timestamp.substring(6, 8)

    return GMT
  }
  const key = ref('card')
  const detailCloseFn = () => {
    realNameForm.value = {}
    detailVisible.value = false
    key.value = 'card'
  }
  const detailFns = (val: any) => {
    console.log(val)
    if (val.series.shutdownEarly && val.series.shutdownEarlyType != null) {
      if (val.expirationTime) {
        const num = useCommon.getTimeDifferences1(val.expirationTime, val.series.shutdownEarlyType)
        console.log(num)
        if (num <= val.series.shutdownEarly) {
          val.chong = '未提前续费套餐停机'
        } else {
          val.chong = ''
        }
      } else {
        val.chong = ''
      }
    }
    detail.value = JSON.parse(JSON.stringify(val))
    key.value = 'card'
    detailVisible.value = true
  }

  const jianCeFn = (val: any) => {
    if (val.series.shutdownEarly && val.series.shutdownEarlyType !== null) {
      if (val.expirationTime) {
        const num = useCommon.getTimeDifferences1(val.expirationTime, val.series.shutdownEarlyType)
        if (num <= val.series.shutdownEarly) {
          val.chong = '未提前续费套餐停机'
        } else {
          val.chong = ''
        }
      } else {
        val.chong = ''
      }
    }
    detail.value = JSON.parse(JSON.stringify(val))
    zhiVisible.value = true
  }
  const tableLoading = ref(false)
  const tables = reactive({
    tableLoading: false,
    bordered: false,
    striped: false,
    expand: [1],
    isExpand: false,
  })
  function showAdd() {
    visible.value = true
  }

  function changeTab(key: any) {
    if (key == '5') {
      doRefreshOrder(1)
    } else if (key == '6') {
      doRefreshPay(1)
    } else if (key == '7') {
      doRefreshOperate(1)
    } else if (key == '4') {
      cardNameFn()
    } else if (key == '9') {
      doRefreshOperate1()
    }
  }

  const cardNameFn = () => {
    get({
      url: cardName,
      data: () => {
        return {
          cardId: detail.value.id,
        }
      },
    }).then((res) => {
      if (res.code == 0) {
        if (res.data) {
          realNameForm.value = res.data
        } else {
          realNameForm.value = {}
        }
      }
    })
  }

  function doRefreshOperate1(value?: any) {
    columns4.value = []
    if (chack2.value == true) {
      columns4.value.push({
        title: '真实已用',
        key: 'realUsed',
      })
    }
    if (chack3.value == true) {
      columns4.value.push({
        title: '真实总已用',
        key: 'totalRealUsed',
      })
    }
    if (chack.value == true) {
      columns4.value.push({
        title: '使用流量',
        key: 'used',
      })
    }
    if (chack1.value == true) {
      columns4.value.push({
        title: '总使用流量',
        key: 'totalUsed',
      })
    }
    if (chack4.value == true) {
      columns4.value.push({
        title: '记录时间',
        key: 'time',
      })
    }
    load4.value = true
    if (value) {
      pagination4.page = value
    }
    http
      .get({
        url: dosage,
        data: () => {
          return {
            page: pagination4.page,
            size: pagination4.pageSize,
            cardId: detail.value.id,
          }
        },
      })
      .then((res) => {
        load4.value = false
        rebateListse1.value = res.data.list
        pagination4.setTotalSize((res.data as any).totalSize)
      })
      .catch(() => {
        load4.value = false
      })
  }

  function doRefreshOperate(value?: any) {
    load3.value = true
    if (value) {
      pagination3.page = value
    }
    http
      .get({
        url: getOperationList,
        data: () => {
          return {
            page: pagination3.page,
            size: pagination3.pageSize,
            card: detail.value.card,
          }
        },
      })
      .then((res) => {
        load3.value = false
        rebateListse.value = res.data.list
        pagination3.setTotalSize((res.data as any).totalSize)
      })
      .catch(() => {
        load3.value = false
      })
  }
  const typeListsa = ref()
  function getTypeList() {
    http
      .get({
        url: billName,
        data: () => {
          return {}
        },
      })
      .then((res) => {
        typeListsa.value = res.data
      })
  }
  function doRefreshPay(value?: any) {
    load2.value = true
    if (value) {
      if (value == 1) {
        getTypeList()
      }
      pagination2.page = value
    }
    http
      .formpost({
        url: billCard,
        data: () => {
          return {
            page: pagination2.page,
            size: pagination2.pageSize,
            card: detail.value.card,
          }
        },
      })
      .then((res) => {
        load2.value = false
        rebateLists.value = res.data.list
        pagination2.setTotalSize((res.data as any).totalSize)
      })
      .catch(() => {
        load2.value = false
      })
  }

  function doRefreshOrder(value?: any) {
    load1.value = true
    if (value) {
      pagination1.page = value
    }
    http
      .formpost({
        url: orderList,
        data: () => {
          return {
            page: pagination1.page,
            size: pagination1.pageSize,
            cards: detail.value.card,
          }
        },
      })
      .then((res) => {
        load1.value = false
        rebateList.value = res.data.list
        pagination1.setTotalSize((res.data as any).totalSize)
      })
      .catch(() => {
        load1.value = false
      })
  }

  function correctId(val: any) {
    correctForm.value = JSON.parse(JSON.stringify(val))
    detailVisible.value = false
    correctVisible.value = true
  }

  function detailFn(val?: any, val1?: any) {
    key.value = 'card'
    get({
      url: cardSingle,
      data: {
        card: val.card ? val.card : val.iccid,
      },
    })
      .then((res) => {
        if (res.code == 0) {
          useCommon.state.forEach((val: any) => {
            if (val.state == res.data.state) {
              res.data.stateName = val
            }
          })
          if (res.data.user) {
            if (res.data.user) {
              res.data.user.parent.reverse()
            }
          }
          rebateList.value = res.data.cardOrders
          if (res.data.exceptionType) {
            useCommon.error.forEach((val: any) => {
              if (val.state == res.data.exceptionType) {
                res.data.errorName = val.name
              }
            })
          }
          if (res.data.used == 0) {
            res.data.bai = 0
          } else {
            res.data.bai = Math.floor((res.data / res.data) * 100) / 100
          }
          if (res.data.series.shutdownEarly && res.data.series.shutdownEarlyType != null) {
            if (res.data.expirationTime) {
              const num = useCommon.getTimeDifferences1(
                res.data.expirationTime,
                res.data.series.shutdownEarlyType
              )
              if (num <= res.data.series.shutdownEarly) {
                res.data.chong = '未提前续费套餐停机'
              } else {
                res.data.chong = ''
              }
            } else {
              res.data.chong = ''
            }
          }
          detail.value = res.data
          if (val1) {
            detailVisible.value = true
          }
        }
      })
      .catch(console.log)
  }

  function passWordFn(val?: any) {
    passWordForm.id = val
    passWordVisible.value = true
  }

  function passWordSub() {
    passWordRef.value?.validate().then((error: any) => {
      if (!error) {
        loadings.value = true
        formpost({
          url: passWord,
          data: () => {
            return {
              id: passWordForm.id,
              passWord: md5(passWordForm.passWord),
            }
          },
        })
          .then((res: any) => {
            if (res.code == 0) {
              Message.success('修改成功')
              loadings.value = false
              passWordCFn()
              doRefresh()
            }
          })
          .catch(() => {
            loadings.value = false
          })
      }
    })
  }

  function correctCFn() {
    correctRef.value?.resetFields()
    correctVisible.value = false
  }

  function correctSub() {
    correctRef.value?.validate().then((error: any) => {
      if (!error) {
        loadinges.value = true
        formpost({
          url: update,
          data: () => {
            return {
              ...correctForm.value,
            }
          },
        })
          .then((res: any) => {
            if (res.code == 0) {
              Message.success('修改成功')
              loadinges.value = false
              correctCFn()
              doRefresh()
            }
          })
          .catch(() => {
            loadinges.value = false
          })
      }
    })
  }

  function balanceCFn() {
    balanceRef.value?.resetFields()
    balanceVisible.value = false
  }

  function balanceFn(val: any, val1: any) {
    // detailVisible.value = false
    balanceForm.id = val.id
    balanceForm.balance1 = val1
    balanceVisible.value = true
    mcard.value.card = val.card
  }

  function balanceSub() {
    balanceRef.value?.validate().then((error: any) => {
      if (!error) {
        loadings.value = true
        formpost({
          url: balance,
          data: () => {
            return {
              id: balanceForm.id,
              balance: balanceForm.balance,
              type: balanceForm.type,
              remarks: balanceForm.remark,
            }
          },
        })
          .then((res: any) => {
            if (res.code == 0) {
              Message.success('修改成功')
              loadings.value = false
              detailFn(mcard.value)
              balanceCFn()
              doRefresh()
            }
          })
          .catch(() => {
            loadings.value = false
          })
      }
    })
  }

  function mealCFn() {
    mealRef.value?.resetFields()
    mealVisible.value = false
  }
  const mcard = ref({
    card: '',
  })
  function mealFn(val: any) {
    // detailVisible.value = false
    mealForm.cardId = val.id
    mcard.value.card = val.card
    lis.value = false
    get({
      url: mealLists,
      data: () => {
        return {
          seriesIds: val.seriesId,
        }
      },
    }).then((res) => {
      if (res.code == 0) {
        lists.value = res.data
      }
    })
    mealVisible.value = true
  }

  const lis = ref(false)
  function changeMeal(val: any) {
    lists.value.forEach((item: any) => {
      if (item.id == val) {
        if (item.next) {
          lis.value = false
        } else {
          lis.value = true
        }
        mealForm.next = 0
      }
    })
  }

  function mealSub() {
    mealRef.value?.validate().then((error: any) => {
      if (!error) {
        http
          .formpost({
            url: orderpay,
            data: {
              ...mealForm,
            },
          })
          .then((res) => {
            if (res.code == 0) {
              mealCFn()
              Message.success('充值成功')
              detailFn(mcard.value)
              doRefresh()
            }
          })
      }
    })
  }

  function passWordCFn() {
    passWordRef.value?.resetFields()
    passWordVisible.value = false
  }

  function handleCancelRetrieve() {
    retrieveForms.value?.resetFields()
    retrieveVisible.value = false
    checked1.value = 'orderly'
    disabled.value = false
    loadings.value = false
    loadings.value = false
  }

  function cancelSub() {
    cancelRef.value?.validate().then((error: any) => {
      if (!error) {
        loadings.value = true
        http
          .formpost({
            url: updateCancelLise + '?cancellationGroupId=' + cancelForm.cancellationGroupId,
            data: () => {
              return {
                cardMultiline: cancelForm.cardMultiline,
              }
            },
          })
          .then((res) => {
            if (res.code == 0) {
              Message.success('注销成功')
              loadings.value = false
              cancelVisible.value = false
              doRefresh()
            }
          })
          .catch(() => {
            loadings.value = false
          })
      }
    })
  }

  function cancelCFn() {
    cancelRef.value?.resetFields()
    cancelVisible.value = false
    loadings.value = false
  }

  function cancelCFns(val: any) {
    cancelForm.cardMultiline = val
    cancelVisible.value = true
  }

  function handleCancelDelete() {
    deleteForms.value?.resetFields()
    deleteVisible.value = false
    checked1.value = 'orderly'
    disabled.value = false
    loadings.value = false
    loadings.value = false
  }

  function handleCancelParameter() {
    parameterForms.value?.resetFields()
    channelId.value = 0
    checked1.value = 'orderly'
    parameterVisible.value = false
    disabled.value = false
    loadings.value = false
    loadings.value = false
  }

  const carda = ref('')

  function cardsFn() {
    const arr = card.value.split(/\n/g)

    carda.value = arr.toString()
    cardsVisible.value = false
  }
  function cardsFns() {
    form.ids = ''
    form.cards = ''
  }

  const handleBeforeOkDeletes = () => {
    deleteForms.value?.validate().then((error: any) => {
      if (!error) {
        cardLists.value = ''
        loading1.value = true
        stepCurrent.value = 1
        if (checked1.value == 'orderly') {
          http
            .post({
              url: postOrderlyCheckDelete,
              data: () => {
                return {
                  addCard: deleteForm.addCard,
                  endCard: deleteForm.endCard,
                  remarks: deleteForm.remarks,
                }
              },
            })
            .then((res) => {
              if (res.code == 0) {
                names.value = '删除'
                loadings.value = false
                jianceForm.value = res.data
                if (res.data.total >= 1000) {
                  stepVisible.value = true
                } else {
                  stepVisible.value = true
                }
              }
            })
            .catch(() => {
              loadings.value = false
            })
        } else {
          if (checked1.value == 'seach') {
            formpost({
              url: getCardId,
              data: () => {
                return {
                  ...form,
                  userIds: form.userIds.toString(),
                  states: form.states.toString(),
                  channelIds: form.channelIds.toString(),
                  seriesIds: form.seriesIds.toString(),
                }
              },
            })
              .then((res) => {
                if (res.code == 0) {
                  const card = []
                  res.data.forEach((element: any) => {
                    card.push(element.card)
                  })
                  cardLists.value = card.join('\n')
                  shanWuFn(card.join('\n'))
                }
              })
              .catch(console.log)
          } else {
            shanWuFn(deleteForm.cardMultiline)
          }
        }
      }
    })
  }
  //无序删除卡板
  function shanWuFn(val) {
    http
      .formpost({
        url: postDisOrderCheckDelete,
        data: () => {
          return {
            remarks: deleteForm.remarks,
            cardMultiline: val,
          }
        },
      })
      .then((res) => {
        if (res.code == 0) {
          loadings.value = false
          names.value = '删除'
          jianceForm.value = res.data
          if (res.data.total >= 1000) {
            stepVisible.value = true
          } else {
            stepVisible.value = true
          }
        }
      })
      .catch(() => {
        loadings.value = false
      })
  }
  const handleBeforeOkDelete = () => {
    deleteForms.value?.validate().then((error: any) => {
      if (!error) {
        loadings.value = true
        if (checked1.value == 'orderly') {
          http
            .post({
              url: deletePostOrderly,
              data: () => {
                return {
                  addCard: deleteForm.addCard,
                  endCard: deleteForm.endCard,
                  remarks: deleteForm.remarks,
                }
              },
            })
            .then((res) => {
              if (res.code == 0) {
                names.value = '删除'
                jianceForm.value = res.data
                errorValue.value = ''
                jieguo.value = false
                stepVisible.value = true
                stepCurrent.value = 3

                loadings.value = false
                deleteForm.addCard = ''
                deleteForm.endCard = ''
                deleteForm.remarks = ''
                deleteForm.cardMultiline = ''
                doRefresh(1)
              }
            })
            .catch(() => {
              loadings.value = false
            })
        } else {
          http
            .formpost({
              url: deletePostDisOrder,
              data: () => {
                return {
                  remarks: deleteForm.remarks,
                  cardMultiline:
                    checked1.value == 'seach' ? cardLists.value : deleteForm.cardMultiline,
                }
              },
            })
            .then((res) => {
              if (res.code == 0) {
                names.value = '删除'
                jianceForm.value = res.data
                errorValue.value = ''
                jieguo.value = false
                stepVisible.value = true
                stepCurrent.value = 3

                loadings.value = false
                deleteForm.addCard = ''
                deleteForm.endCard = ''
                deleteForm.remarks = ''
                deleteForm.cardMultiline = ''
                doRefresh(1)
              }
            })
            .catch(() => {
              loadings.value = false
            })
        }
      }
    })
  }

  const handleBeforeOkRetrieves = () => {
    retrieveForms.value?.validate().then((error: any) => {
      if (!error) {
        cardLists.value = ''
        loading1.value = true
        stepCurrent.value = 1
        if (checked1.value == 'orderly') {
          http
            .post({
              url: postOrderlyCheckRecovery,
              data: () => {
                return {
                  addCard: retrieveForm.addCard,
                  endCard: retrieveForm.endCard,
                  remarks: retrieveForm.remarks,
                }
              },
            })
            .then((res) => {
              if (res.code == 0) {
                names.value = '回收'
                loadings.value = false
                jianceForm.value = res.data
                if (res.data.total >= 1000) {
                  console.log('进来了')
                  stepVisible.value = true
                } else {
                  stepVisible.value = true
                }
              }
            })
            .catch(() => {
              loadings.value = false
            })
        } else {
          if (checked1.value == 'seach') {
            formpost({
              url: getCardId,
              data: () => {
                return {
                  ...form,
                  userIds: form.userIds.toString(),
                  states: form.states.toString(),
                  channelIds: form.channelIds.toString(),
                  seriesIds: form.seriesIds.toString(),
                }
              },
            })
              .then((res) => {
                if (res.code == 0) {
                  const card = []
                  res.data.forEach((element: any) => {
                    card.push(element.card)
                  })
                  cardLists.value = card.join('\n')
                  huiWuFn(card.join('\n'))
                }
              })
              .catch(console.log)
          } else {
            huiWuFn(retrieveForm.cardMultiline)
          }
        }
      }
    })
  }
  //无序回收卡板检测
  function huiWuFn(val: any) {
    http
      .formpost({
        url: postDisOrderCheckRecovery,
        data: () => {
          return {
            remarks: retrieveForm.remarks,
            cardMultiline: val,
          }
        },
      })
      .then((res) => {
        if (res.code == 0) {
          names.value = '回收'
          loadings.value = false
          jianceForm.value = res.data
          if (res.data.total >= 1000) {
            stepVisible.value = true
          } else {
            stepVisible.value = true
          }
        }
      })
      .catch(() => {
        loadings.value = false
      })
  }
  const handleBeforeOkRetrieve = () => {
    retrieveForms.value?.validate().then((error: any) => {
      if (!error) {
        loadings.value = true
        if (checked1.value == 'orderly') {
          http
            .post({
              url: recoveryPostOrderly,
              data: () => {
                return {
                  addCard: retrieveForm.addCard,
                  endCard: retrieveForm.endCard,
                  remarks: retrieveForm.remarks,
                }
              },
            })
            .then((res) => {
              if (res.code == 0) {
                names.value = '回收'
                jianceForm.value = res.data
                errorValue.value = ''
                jieguo.value = false
                stepVisible.value = true
                stepCurrent.value = 3
                loadings.value = false
                retrieveForm.addCard = ''
                retrieveForm.endCard = ''
                retrieveForm.remarks = ''
                retrieveForm.cardMultiline = ''
                doRefresh(1)
              }
            })
            .catch(() => {
              loadings.value = false
            })
        } else {
          http
            .formpost({
              url: recoveryPostDisOrder,
              data: () => {
                return {
                  remarks: retrieveForm.remarks,
                  cardMultiline:
                    checked1.value == 'seach' ? cardLists.value : retrieveForm.cardMultiline,
                }
              },
            })
            .then((res) => {
              if (res.code == 0) {
                names.value = '回收'
                jianceForm.value = res.data
                errorValue.value = ''
                jieguo.value = false
                stepVisible.value = true
                stepCurrent.value = 3
                loadings.value = false
                retrieveForm.addCard = ''
                retrieveForm.endCard = ''
                retrieveForm.remarks = ''
                retrieveForm.cardMultiline = ''
                doRefresh(1)
              }
            })
            .catch(() => {
              loadings.value = false
            })
        }
      }
    })
  }

  function handleCancelhuaka() {
    huakaForms.value?.resetFields()
    huakavisible.value = false
    checked1.value = 'orderly'
    disabled.value = false
    loadings.value = false
    loadings.value = false
  }

  const handleBeforeOkParameters = () => {
    parameterForms.value?.validate().then((error: any) => {
      if (!error) {
        loadings.value = true
        stepCurrent.value = 1
        if (checked1.value == 'orderly') {
          http
            .post({
              url: postOrderlyCheckParameter + '?seriesId=' + parameterForm.seriesId,
              data: () => {
                return {
                  addCard: parameterForm.addCard,
                  endCard: parameterForm.endCard,
                  remarks: parameterForm.remarks,
                }
              },
            })
            .then((res) => {
              if (res.code == 0) {
                loadings.value = false
                names.value = '修改'
                jianceForm.value = res.data
                if (res.data.total >= 1000) {
                  stepVisible.value = true
                } else {
                  stepVisible.value = true
                }
              }
            })
            .catch(() => {
              loadings.value = false
            })
        } else {
          if (checked1.value == 'seach') {
            formpost({
              url: getCardId,
              data: () => {
                return {
                  ...form,
                  userIds: form.userIds.toString(),
                  states: form.states.toString(),
                  channelIds: form.channelIds.toString(),
                  seriesIds: form.seriesIds.toString(),
                }
              },
            })
              .then((res) => {
                if (res.code == 0) {
                  const card = []
                  res.data.forEach((element: any) => {
                    card.push(element.card)
                  })
                  cardLists.value = card.join('\n')
                  xiWuFn(card.join('\n'))
                }
              })
              .catch(console.log)
          } else {
            xiWuFn(parameterForm.cardMultiline)
          }
        }
      }
    })
  }
  //无序修改系列检测
  function xiWuFn(val) {
    http
      .formpost({
        url: postDisOrderCheckParameter,
        data: () => {
          return {
            seriesId: parameterForm.seriesId,
            remarks: parameterForm.remarks,
            cardMultiline: val,
          }
        },
      })
      .then((res) => {
        if (res.code == 0) {
          loadings.value = false
          names.value = '修改'
          jianceForm.value = res.data
          if (res.data.total >= 1000) {
            stepVisible.value = true
          } else {
            stepVisible.value = true
          }
        }
      })
      .catch(() => {
        loadings.value = false
      })
  }
  const handleBeforeOkParameter = () => {
    parameterForms.value?.validate().then((error: any) => {
      if (!error) {
        loadings.value = true

        if (checked1.value == 'orderly') {
          http
            .post({
              url: parameterPostOrderly + '?seriesId=' + parameterForm.seriesId,
              data: () => {
                return {
                  addCard: parameterForm.addCard,
                  endCard: parameterForm.endCard,
                  remarks: parameterForm.remarks,
                }
              },
            })
            .then((res) => {
              if (res.code == 0) {
                names.value = '修改'
                jianceForm.value = res.data
                errorValue.value = ''
                jieguo.value = false
                stepVisible.value = true
                stepCurrent.value = 3

                loadings.value = false
                parameterForm.addCard = ''
                parameterForm.endCard = ''
                parameterForm.remarks = ''
                parameterForm.cardMultiline = ''
                parameterForm.seriesId = ''
                doRefresh(1)
              }
            })
            .catch(() => {
              loadings.value = false
            })
        } else {
          http
            .formpost({
              url: parameterPostDisOrder,
              data: () => {
                return {
                  seriesId: parameterForm.seriesId,
                  remarks: parameterForm.remarks,
                  cardMultiline:
                    checked1.value == 'seach' ? cardLists.value : parameterForm.cardMultiline,
                }
              },
            })
            .then((res) => {
              if (res.code == 0) {
                names.value = '修改'
                jianceForm.value = res.data
                errorValue.value = ''
                jieguo.value = false
                stepVisible.value = true
                stepCurrent.value = 3

                loadings.value = false
                parameterForm.addCard = ''
                parameterForm.endCard = ''
                parameterForm.remarks = ''
                parameterForm.cardMultiline = ''
                parameterForm.seriesId = ''
                doRefresh(1)
              }
            })
            .catch(() => {
              loadings.value = false
            })
        }
      }
    })
  }

  const handleBeforeOkhuakas = () => {
    huakaForms.value?.validate().then((error: any) => {
      if (!error) {
        cardLists.value = ''
        loadings.value = true
        stepCurrent.value = 1
        if (checked1.value == 'orderly') {
          http
            .post({
              url: postOrderlyCheck + '?userId=' + huakaForm.userId,
              data: () => {
                return {
                  addCard: huakaForm.addCard,
                  endCard: huakaForm.endCard,
                  remarks: huakaForm.remarks,
                }
              },
            })
            .then((res) => {
              if (res.code == 0) {
                names.value = '分销'
                loadings.value = false
                jianceForm.value = res.data
                if (res.data.total >= 1000) {
                  stepVisible.value = true
                } else {
                  stepVisible.value = true
                }
              }
            })
            .catch(() => {
              loadings.value = false
            })
        } else {
          if (checked1.value == 'seach') {
            formpost({
              url: getCardId,
              data: () => {
                return {
                  ...form,
                  userIds: form.userIds.toString(),
                  states: form.states.toString(),
                  channelIds: form.channelIds.toString(),
                  seriesIds: form.seriesIds.toString(),
                }
              },
            })
              .then((res) => {
                if (res.code == 0) {
                  const card = []
                  res.data.forEach((element: any) => {
                    card.push(element.card)
                  })
                  cardLists.value = card.join('\n')
                  fenWuFn(card.join('\n'))
                }
              })
              .catch(console.log)
          } else {
            fenWuFn(huakaForm.cardMultiline)
          }
        }
      }
    })
  }
  //无序分销检测
  function fenWuFn(val: any) {
    console.log(val)
    http
      .formpost({
        url: postDisOrderCheck,
        data: () => {
          return {
            userId: huakaForm.userId,
            remarks: huakaForm.remarks,
            cardMultiline: val,
          }
        },
      })
      .then((res) => {
        if (res.code == 0) {
          names.value = '分销'
          loadings.value = false
          jianceForm.value = res.data
          if (res.data.total >= 1000) {
            stepVisible.value = true
          } else {
            stepVisible.value = true
          }
        }
      })
      .catch(() => {
        loadings.value = false
      })
  }

  const conset = () => {
    if (stepCurrent.value == 3) {
      stepsClose()
    } else {
      if (jianceForm.value.total < 1000) {
        if (names.value == '分销') {
          handleBeforeOkhuaka()
        } else if (names.value == '修改') {
          handleBeforeOkParameter()
        } else if (names.value == '回收') {
          handleBeforeOkRetrieve()
        } else if (names.value == '删除') {
          handleBeforeOkDelete()
        } else if (names.value == '备注') {
          jieguo.value = false
        } else if (names.value == '一卡一码绑定') {
          oneCodeJie()
        }
      } else {
        if (
          names.value == '分销' ||
          names.value == '回收' ||
          names.value == '删除' ||
          names.value == '修改'
        ) {
          if (stepCurrent.value == 1) {
            stepCurrent.value = 2
          } else {
            if (errorValue.value == '确认操作') {
              error.value = false
              if (names.value == '分销') {
                handleBeforeOkhuaka()
              } else if (names.value == '修改') {
                handleBeforeOkParameter()
              } else if (names.value == '回收') {
                handleBeforeOkRetrieve()
              } else if (names.value == '删除') {
                handleBeforeOkDelete()
              } else if (names.value == '备注') {
                jieguo.value = false
              } else if (names.value == '一卡一码绑定') {
                oneCodeJie()
              }
            } else {
              error.value = true
            }
          }
        } else {
          if (errorValue.value == '确认操作') {
            error.value = false
            if (names.value == '分销') {
              handleBeforeOkhuaka()
            } else if (names.value == '修改') {
              handleBeforeOkParameter()
            } else if (names.value == '回收') {
              handleBeforeOkRetrieve()
            } else if (names.value == '删除') {
              handleBeforeOkDelete()
            } else if (names.value == '备注') {
              jieguo.value = false
            } else if (names.value == '一卡一码绑定') {
              oneCodeJie()
            }
          } else {
            error.value = true
          }
        }
      }
    }
  }
  const handleBeforeOkhuaka = () => {
    huakaForms.value?.validate().then((error: any) => {
      if (!error) {
        loadings.value = true
        if (checked1.value == 'orderly') {
          http
            .post({
              url: postOrderly + '?userId=' + huakaForm.userId,
              data: () => {
                return {
                  addCard: huakaForm.addCard,
                  endCard: huakaForm.endCard,
                  remarks: huakaForm.remarks,
                }
              },
            })
            .then((res) => {
              if (res.code == 0) {
                names.value = '分销'
                jianceForm.value = res.data
                errorValue.value = ''
                stepCurrent.value = 3
                loadings.value = false
                jieguo.value = false
                huakaForm.userId = ''
                huakaForm.remarks = ''
                huakaForm.addCard = ''
                huakaForm.endCard = ''
                huakaForm.cardMultiline = ''
                doRefresh(1)
              }
            })
            .catch(() => {
              loadings.value = false
            })
        } else {
          http
            .formpost({
              url: postDisOrder,
              data: () => {
                return {
                  userId: huakaForm.userId,
                  remarks: huakaForm.remarks,
                  cardMultiline:
                    checked1.value == 'seach' ? cardLists.value : huakaForm.cardMultiline,
                }
              },
            })
            .then((res) => {
              if (res.code == 0) {
                names.value = '分销'
                jianceForm.value = res.data
                errorValue.value = ''
                stepCurrent.value = 3
                loadings.value = false
                jieguo.value = false
                huakaForm.userId = ''
                huakaForm.remarks = ''
                huakaForm.addCard = ''
                huakaForm.endCard = ''
                huakaForm.cardMultiline = ''
                doRefresh(1)
              }
            })
            .catch(() => {
              loadings.value = false
            })
        }
      }
    })
  }
  //复机
  function startFn(item: any) {
    Modal.warning({
      title: '操作确认',
      content: '确定要恢复此卡吗？',
      cancelText: '取消',
      titleAlign: 'start',
      hideCancel: false,
      okText: '确定',
      onOk: () => {
        get({
          url: start,
          data: () => {
            return {
              id: item.id,
            }
          },
        }).then((res) => {
          if (res.code == 0) {
            Modal.warning({
              title: '操作报文',
              content: res.msg,
              cancelText: '取消',
              titleAlign: 'start',
              hideCancel: false,
              okText: '确定',
              onOk: () => {},
            })
            detailFn(item)
            doRefresh()
          }
        })
      },
    })
  }
  //停机
  function stopFn(item: any) {
    Modal.warning({
      title: '操作确认',
      content: '确定要停用此卡吗？',
      cancelText: '取消',
      titleAlign: 'start',
      hideCancel: false,
      okText: '确定',
      onOk: () => {
        get({
          url: stop,
          data: () => {
            return {
              id: item.id,
            }
          },
        }).then((res) => {
          if (res.code == 0) {
            Modal.warning({
              title: '操作报文',
              content: res.msg,
              cancelText: '取消',
              titleAlign: 'start',
              hideCancel: false,
              okText: '确定',
              onOk: () => {},
            })
            detailFn(item)
            doRefresh()
          }
        })
      },
    })
  }

  //刷新
  function RefreshFn(item: any, val?: any) {
    get({
      url: refresh,
      data: () => {
        return {
          id: item.id,
          type: val,
        }
      },
    }).then((res) => {
      if (res.code == 0) {
        Message.success(res.msg)
        detailFn(item)
        doRefresh()
      }
    })
  }

  const serchForm = ref()
  const resetSeach = () => {
    serchForm.value.resetFields()
    form.ids = ''
    form.addPayNumber = ''
    form.endPayNumber = ''
    form.endId = ''
    form.endBalance = '' //      结束余额
    form.endUsed = '' //      结束已用
    form.endFree = '' //      结束剩余
    form.endUpstreamFlow = '' //      结束上游用量
    form.cards = ''
    types.value = 'flowRefreshTime'
    typesNum.value = ''
    form.flowRefreshTime = '' //   流量刷新时间 当为0时表示未刷新过 小于0时超出X小时未刷新 大于0时X小时内刷新过
    form.stateRefreshTime = '' //   状态刷新时间 当为0时表示未刷新过 小于0时超出X小时未刷新 大于0时X小时内刷新过
    form.realNameRefreshTime = ''
    card.value = ''
    carda.value = ''
    doRefresh(1)
  }

  const delimitation = (item: any) => {
    getList()
    huakaForm.userId = item.id
    huakavisible.value = true
  }
  //排序
  function handleChange(data, extra, currentDataSource) {
    if (extra.sorter) {
      form.sort = extra.sorter.field
      if (extra.sorter.direction == 'ascend') {
        form.asc = true
      } else {
        form.asc = false
      }
    } else {
      form.sort = ''
      form.asc = ''
    }
    console.log('change', data, extra, currentDataSource)
    doRefresh(1)
  }

  function updatUserPop(item: any) {
    subFormEdit.value = JSON.parse(JSON.stringify(item))
    visibleEdit.value = true
  }
  const total: any = ref({
    balance: 0,
    free: 0,
    real_used: 0,
    upstream_flow: 0,
    used: 0,
  })
  function cardStatisticsFn() {
    form[types.value] = typesNum.value
    form[type.value] = carda.value
    formpost({
      url: cardStatistics,
      data: () => {
        return {
          ...form,
          userIds: form.userIds.toString(),
          channelIds: form.channelIds.toString(),
          seriesIds: form.seriesIds.toString(),
          states: form.states.toString(),
        }
      },
    })
      .then((res) => {
        total.value = res.data
      })
      .catch(console.log)
  }

  function doRefresh(value?: number) {
    // eslint-disable-next-line prettier/prettier
    tableLoading.value = true
    if (value) {
      pagination.page = value
    }
    form[types.value] = typesNum.value
    form[type.value] = carda.value

    http
      .formpost({
        url: cardList,
        data: () => {
          return {
            page: pagination.page,
            size: pagination.pageSize,
            ...form,
            userIds: form.userIds.toString(),
            states: form.states.toString(),
            channelIds: form.channelIds.toString(),
            seriesIds: form.seriesIds.toString(),
          }
        },
      })
      .then((res) => {
        tableLoading.value = false
        cardStatisticsFn()
        res.data.list.forEach((item: any) => {
          item.showIcon = false
          useCommon.state.forEach((val: any) => {
            if (val.state == item.state) {
              item.stateName = val
            }
          })
          useCommon.error.forEach((val: any) => {
            if (val.state == item.exceptionType) {
              item.exceptionName = val.name
              item.exceptionForm = val
            }
          })
        })
        table.handleSuccess(res.data.list)
        pagination.setTotalSize((res.data as any).totalSize)
      })
      .catch(console.log)
  }

  const onSetTable = (value: any) => {
    setTableDepartments(value)
  }

  const setTableDepartments = (val: any) => {
    useCommon.setTitleSort({ name: 'CARD', configs: val }).then(() => {
      getTableDepartments()
    })
  }

  const getTableDepartments = () => {
    useCommon.getTitleSort('CARD').then((res) => {
      if (res.data) {
        tableColumns.list = []
        tableColumns.nsma = []
        res.data.configs.forEach((item: any) => {
          if (item.checked == true) {
            tableColumns.list.push(item)
          }
          tableColumns.nsma.push(item)
          nameMSG.value.forEach((items: any) => {
            if (items.title == item.title) {
              items.checked = item.checked
            }
          })
        })
      } else {
        let a = JSON.parse(JSON.stringify(nameMSG.value))
        tableColumns.list = a
        tableColumns.nsma = a
      }
    })
  }
  function onUpdateTable(newColumns: Array<TablePropsType>) {
    useCommon.setTitleSort({ name: 'CARD', configs: newColumns }).then(() => {
      getTableDepartments()
    })
  }
  const onUpdateBorder = (isBordered: boolean) => {
    tables.bordered = isBordered
  }
  function onUpdateStriped(isStriped: boolean) {
    tables.striped = isStriped
  }

  function getList() {
    useCommon.userLists().then((res: any) => {
      userList.value = res.data
    })
  }
  function rowClassNameFun(_record: any, index: number) {
    return index % 2 === 1 && table.striped.value ? 'table-striped' : null
  }
  const loading = ref(false)
  const exportDepartments = () => {
    form[types.value] = typesNum.value
    form[type.value] = carda.value
    loading.value = true
    useCommon
      .downLoadPosts(exportCardList, form, '卡板列表')
      .then(() => {
        loading.value = false
      })
      .catch(() => {
        loading.value = false
      })
  }
  function getchannel() {
    useCommon.channels1().then((res: any) => {
      channel.value = res.data
    })
  }
  function getseries() {
    useCommon.seriess().then((res: any) => {
      series.value = res.data
    })
  }

  // const getCancel = () => {
  //   get({
  //     url: getCancelType,
  //   }).then((res: any) => {
  //     cancelType.value = res.data
  //   })
  // }

  const getCancelClas = () => {
    get({
      url: getCancelClass,
    }).then((res: any) => {
      cancelMold.value = res.data
    })
  }

  onUnmounted(() => {
    clearInterval(intervalId.value) // 组件销毁时清除定时器
  })
  onMounted(async () => {
    await getTableDepartments()
    await doRefresh()
    await getList()
    await getchannel()
    await getseries()
    // await getCancel()
    await getCancelClas()
  })
</script>

<style lang="less" scoped>
  .imgsa1 {
    width: 70px;
    height: 70px;
  }
  .tabs-button {
    margin-top: 20px;
    :deep(.arco-radio-button-content) {
      width: calc(930px / 8);
      line-height: 35px;
      text-align: center;
      height: 35px;
    }
    :deep(.arco-radio-button.arco-radio-checked) {
      background-color: rgb(var(--primary-6));
      color: var(--color-bg-2);
    }
    :deep(.arco-radio-button:hover) {
      background-color: rgb(var(--primary-6));
      color: var(--color-bg-2);
    }
  }
  .demo-item {
    .text-name {
      color: #86909c;
      font-size: 14px;
    }
    .text-info {
      font-size: 16px;
      display: flex;
      margin-top: 10px;
      align-items: center;
    }
  }
  .box {
    display: flex;
    align-items: center;
    height: 30px;
    margin: 5px 10px 10px 0px;

    .line {
      width: 4px;
      height: 15px;
      margin-right: 8px;
      background-color: #40a1ff;
    }
    .text {
      display: flex;
      align-items: center;
    }
  }
  .display-box {
    display: flex;
    .display-right {
      margin-left: 20px;
      .text {
        font-size: 14px;
        color: #86909c;
        line-height: 23px;
      }
      .text-name {
        font-size: 15px;
        line-height: 25px;
        display: flex;
        align-items: center;
      }
    }
  }
  .padding20 {
    padding: 0 20px;
  }
  .img {
    width: 60px;
    height: 60px;
  }
  .imgs {
    margin-left: 10px;
    width: 60px;
    height: 60px;
  }
  .col-div {
    margin-top: 20px;
    padding: 0 20px;
    margin-bottom: 20px;
  }
  .col-div .arco-col {
    margin-bottom: 10px;
  }
  :deep(.arco-steps-item-finish .arco-steps-icon) {
    color: rgb(var(--primary-6));
    background-color: var(--color-link-light-1);
    border: 1px solid transparent;
  }

  :deep(.arco-steps-item-process) {
    .arco-steps-item-title {
      color: #40a1ff;
    }
  }

  :deep(.arco-steps-item-process) {
    .arco-steps-item-description {
      color: #40a1ff;
    }
  }
  .step1 {
    .top {
      width: 100%;
      border-radius: 0;
      margin-top: 20px;
      font-size: 13px;
      text-align: center;
      padding: 5px;
      border: 1px solid #f2f3f5;
    }
    .alert-text {
      border-radius: 4px;
      text-align: center;
    }
  }
  .table {
    width: 100%;
    .title {
      padding: 0 1px;
      display: flex;
      background-color: var(--color-fill-1);
      .name {
        width: 33%;
        line-height: 45px;
        text-align: center;
        // background-color: var(--color-neutral-4);
      }
    }
    .list {
      box-sizing: border-box;
      display: flex;
      border-bottom: 1px solid var(--color-neutral-3);
      border-left: 1px solid var(--color-neutral-3);
      border-right: 1px solid var(--color-neutral-3);
      .names {
        width: 33%;
        line-height: 45px;
        text-align: center;
      }
      .namesa {
        width: 66%;
        line-height: 45px;
        text-align: center;
      }
    }
  }
  .pilianglokolo {
    :deep(.arco-tabs-tab) {
      padding: 0px !important;
      margin-right: 10px;
    }
    :deep(.arco-tabs-tab-active) {
      background-color: #e8f7ff !important;
    }
    :deep(.arco-tabs-nav-ink) {
      background-color: transparent !important;
    }

    :deep(.arco-tabs-tab-title:hover) {
      padding: 5px 20px !important;
      padding-right: 10px !important;
      margin-right: 10px !important;
    }
    :deep(.arco-tabs-tab-title) {
      padding: 5px 20px !important;
      width: calc(100% - 10px);
    }
    // :deep(.arco-tabs-nav-tab-list) {
    //   margin-right: 10px !important;
    // }
  }

  .top {
    margin-bottom: 20px;
    background-color: var(--color-bg-1);
    border-radius: 10px;

    .box {
      display: flex;
      align-items: center;
      height: 30px;
      margin: 5px 10px;

      .line {
        width: 5px;
        height: 25px;
        margin-right: 10px;
        background-color: #40a1ff;
      }

      .text {
        font-size: 16px;
        line-height: 25px;
        text-align: center;
      }
    }

    .flex {
      display: flex;
      justify-content: space-around;
      margin: 12px 7px;

      .dataBox:last-child {
        margin-right: 0px !important;
      }

      .dataBox {
        display: flex;
        align-items: center;
        justify-content: center;
        align-items: center;
        flex: 1;
        margin-right: 20px;
        height: 150px;
        background-image: linear-gradient(rgb(var(--arcoblue-1)), #fff);
        border: 1px solid #f2f3f5;
        border-radius: 10px;

        .img {
          width: 70px;
          height: 70px;
          margin-right: 20px;
          border-radius: 50%;
        }

        .name {
          margin-top: 0;
        }

        .number {
          font-size: 22px;
        }
      }
    }
  }

  .avatar-container {
    position: relative;
    width: 30px;
    height: 30px;
    margin: 0 auto;
    vertical-align: middle;

    .avatar {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }

    .avatar-vip {
      border: 2px solid #cece1e;
    }

    .vip {
      position: absolute;
      top: 0;
      right: -9px;
      width: 15px;
      transform: rotate(60deg);
    }
  }
  .huakaClass :deep(.arco-form-item-message) {
    margin-left: 42px !important;
  }
  .gender-container {
    .gender-icon {
      width: 20px;
    }
  }

  .ant-table-striped :deep(.table-striped) td {
    background-color: #fafafa;
  }

  .ba {
    display: flex;
    align-items: center;
    cursor: pointer;
    .aa {
      font-size: 18px;
      display: none;
    }
  }

  .ba:hover {
    cursor: pointer;
    .aa {
      font-size: 18px;
      display: block;
      width: 18px;
    }
  }
  :deep(.arco-table-td-content button) {
    padding: 0px !important;
    margin-right: 8px;
    background: none !important;
  }
  .imgsa {
    vertical-align: middle;
    width: 20px;
    height: 20px;
    margin-right: 5px;
  }
</style>
<style lang="less" scoped></style>
